vue vant van-uploader使用compressorjs解决拍照上传的图片被旋转 90 度方法，图片压缩上传

效果图： 

部分手机在拍照上传时会出现图片被旋转 90 度的问题，这个问题可以通过 compressorjs 或其他开源库进行处理。

compressorjs 是一个开源的图片处理库，提供了图片压缩、图片旋转等能力。

安装：

npm install compressorjs

语法：

new Compressor(file[, options]) 

示例：

 

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,

    success(result) {
      const formData = new FormData();

      formData.append('file', result, result.name);
        //接口调用
      axios.post('/upload', formData).then(() => {
        console.log('Upload success');
      });
    },
    error(err) {
      console.log(err.message);
    },
  });
  
});

上传图片时出现浏览器刷新或卡顿现象？

这种现象一般是内存不足导致的，通常发生在旧机型上；上传一张较大的图片引起也引起此现象。

为了减少这种情况的出现，可以在上传图片前对图片进行压缩，压缩方法请参考上文中的提到的 compressorjs 库。

参考扩展：

在vant-ui里面使用实现图片压缩上传，避免旋转问题：

新建封装ImageCompressor.js方法：

import Compressor from 'compressorjs';
export default function ImageCompressor(file, backType, quality) {
    return new Promise((resolve, reject) => {
        new Compressor(file, {
			quality:quality || 0.6, //压缩质量
			success(result) {
                if (!backType || backType == 'blob') {
                    resolve(result)
                } else if (backType == 'file') {
                    resolve(file)
                } else {
                    resolve(file)
                }
				// resolve(result);
			},
			error(err) {
                console.log("图片压缩失败");
				reject(err);
			}
		})
    })
}

 完整代码：

上传的方法：

import ImageCompressor from '@/utils/ImageCompressor'

async afterCard(file){
      const files = file.file;
      let newFile = await ImageCompressor(files, 'file', 0.6); //图片压缩
      const formData = new FormData();
      formData.append('file', newFile);
      uploadImg(formData).then(res => {
        if (res.code == 200) {
          this.centerInfo.iconUrl = res.data;
          let params = {
            iconUrl: res.data,
            id: this.id,
            loginType: this.loginType
          };
          updateMineIconUrl(params)
            .then(resImg => {
              if (resImg.code == 200) {
                this.$toast("头像修改成功");
              } else {
                this.$toast(res.msg);
              }
            })
            .catch(error => {});
        } else {
          this.$toast(res.msg);
        }
      });

    },