vue element-ui upload在圖片上傳之前進行壓縮操作

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