Vue3.0拍照上传旋转90°

有些手机拍照上传到服务器后，图片会旋转，compressorjs 完美解决了这个问题，另外compressorjs压缩图片效果非常好。

Vue3.0拍照上传旋转90°.jpeg

一、Vant UI库Uploader 组件图片上传：

我工作中使用的是Vant UI库，上传图片也是经常遇到手机拍照照片太大需要压缩，上传后发现神奇的旋转，Uploader组件结合compressorjs的使用既可以压缩图片又能防止图片旋转。

import Compressor from 'compressorjs';
export default {
  methods: {
    beforeRead(file) {
      return new Promise((resolve) => {
        // compressorjs 默认开启 checkOrientation 选项
        // 会将图片修正为正确方向
        new Compressor(file, {
          success: resolve,
          error(err) {
            console.log(err.message);
          },
        });
      });
    },
  },
};

二、compressorjs的安装使用

1、安装

npm install compressorjs

2、使用格式

file代表要压缩的图片，类型file或blob。
options可选的一些操作。checkOrientation是否检测图片旋转，默认是true。

new Compressor(file[, options])

3、官方案例

html部分

<input type="file" id="file" accept="image/*">

js部分

import axios from 'axios';
import Compressor from 'compressorjs';

document.getElementById('file').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) {
    return;
  }
  new Compressor(file, {
    quality: 0.6,
    // The compression process is asynchronous,
    // which means you have to access the `result` in the `success` hook function.
    success(result) {
      const formData = new FormData();
      // The third parameter is required for server
      formData.append('file', result, result.name);
      // Send the compressed image file to server with XMLHttpRequest.
      axios.post('/path/to/upload', formData).then(() => {
        console.log('Upload success');
      });
    },
    error(err) {
      console.log(err.message);
    },
  });
});