vue element-ui upload在图片上传之前进行压缩操作

Posted 2020-12-21 xiaozhenoh

1、安装插件

npm install --save image-conversion

2、引入插件

import { compressAccurately } from ‘image-conversion‘ //按需引入

3、在图片上传之前对图片进行压缩

/** 在图片上传前before-upload钩子函数 */
handleBeforeUpload(file) {
  // 注意这里需要用Promise函数来阻止图片没有压缩好,就直接将文件上传
  return new Promise(async (resolve, reject) => {
    const isJPG = file.type === ‘image/jpeg‘;
    const isPng = file.type === ‘image/png‘;
  // 每个限制返回错误信息   都需要用到reject()
    if (!isJPG && !isPng) {
      this.$message.warning(‘上传图片只能是 JPG 或者 PNG 格式!‘);
      return reject(false);  //注意这里需要用reject来返回错误的信息,防止图片自动上传
    }
    let compress = 2048  // 假设图片限制不能大于2M
    let sizeOver = file.size / 1024 > compress; //文件大小 是否大于指定大小
    if (sizeOver && compress) { //大于2M进行压缩
      const res = await compressAccurately(file, {
        size: compress, //需要压缩的大小
        accuracy: 0.9, //精度 0.8-0.99之间 默认值0.95
        type: ‘image/jpeg‘,
        width: 105,
        height: 105,
        orientation: 2,
        scale: 0.5,
      });
      file = res; //把得到的新的图片文件赋值给原文件,然后进行上传
    }
    resolve(true) // 通过resolve将Promise函数返回成功回调,进行后面操作
  })
}

插件github地址: https://github.com/WangYuLue/image-conversion