vue+vant压缩上传图片

1.导入依赖compressorjs

npm install compressorjs

2引入该js文件

import Compressor from 'compressorjs';

3.根据官方文档，有两种写法，一种是上传图片时直接写入上传前的方法里，但上传的是Blop文件，如下所示。

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);
}, 
}); 
});
}, 
}, 
};

4.下面我写入的方法就是多加了一个判断，判断是否是Blop文件，是的花就返回file文件(该方法引入不多的话，也可直接写入页面，先导包，然后把下方的await compressor(file)改写成await this.compressor(file))

 import Compressor from 'compressorjs';
      export  function compressor (file) {
          const type = 'file'
        return new Promise(resolve => {
         new Compressor(file, {
            quality:  0.5,
            height: 480,
            success (result) {
              file = new File([result], file.name, { type: file.type })
              if (!type || type === 'blob') {
                resolve(result)
              } else if (type === 'file') {
                resolve(file)
              } else {
                resolve(file)
              }
            },
            error (err) {
              this.$toast(err.message)
            }
          })
        })
      }
  

5.最后在js页面中引用该方法

    //上传头像前
 async beforeRead(file) {
            // console.log(file.size)
            if (file.size > 512 * 1024) {
                file = await compressor(file)
                return file
              }
        },
        
             // 上传头像
        async afterCard(file) {
            // console.log(file.file)
            this.headerFile = file.content;
            this.file = file.file
        },