vue/react通用上传前图片压缩

vue/react通用上传前图片压缩

当做一些自研项目或者用不了antd等上传组件或者第三方包的时候,又有上传图片等需求,同时现阶段图片文件较大,后端限制大小的时候,如何处理?–利用canvas和Image处理

export const compressImg = (file) => {
  let disposeFile = file;
  if (Object.prototype.toString.call(file) === '[object Blob]') {
    disposeFile = new File([file], file.name, { type: file.type });
  }
  const read = new FileReader();
  const _that = this;
  const fileSize = parseFloat(parseInt(disposeFile.size, 10) / 1024 / 1024).toFixed(2);
  // 小于1m不压缩
  if (fileSize < 1) return file;
  read.readAsDataURL(disposeFile);
  return new Promise((resolve, reject) => {
    try {
      read.onload = (e) => {
        const img = new Image();
        img.src = e.target.result;
        // eslint-disable-next-line func-names
        img.onload = function () {
          const w = Math.floor(this.width / 2);
          const h = Math.floor(this.height / 2);
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          let base64;
          canvas.setAttribute('width', w);
          canvas.setAttribute('height', h);
          ctx.drawImage(this, 0, 0, w, h);
          console.log(w, h);
          if (fileSize < 1) {
            // 如果图片小于一兆 那么不执行压缩操作
            base64 = canvas.toDataURL(disposeFile.type, 1);
          } else if (fileSize > 1 && fileSize < 2) {
            // 如果图片大于1M并且小于2M 那么压缩0.5
            base64 = canvas.toDataURL(disposeFile.type, 0.5);
          } else {
            // 如果图片超过2m 那么压缩0.2
            base64 = canvas.toDataURL(disposeFile.type, 0.2);
          }
          resolve(dataURLtoFile(base64, disposeFile.name));
        };
      };
    } catch (error) {
      reject(disposeFile);
    }
  });
};

使用时候

 // 压缩-记得调用函数前async
    const compassedFile = await compressImg(selFiles[0].file);

其余部分可用input和button等模拟上传即可