借助canvas，上传图片之前进行图片压缩

图片压缩

//在图片上传之前调用次函数即可
 // 压缩图片
  const compressHandler = (file) => {
    return new Promise((resolve, reject) => {
      // 图片压缩
      const reader = new FileReader(),
        img = new Image();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        img.src = e.target.result as string;
      };
      img.onload = function () {
        let rate = 0.52;
        if (file.size < 1024 * 1024) {
          rate = 0.85;
        }
        if (5 * 1024 * 1024 < file.size) {
          rate = 0.92;
        }

        // 文件大小KB
        // const fileSizeKB = Math.floor(file.size / 1024);
        // console.log('fileSizeKB', fileSizeKB)

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        // 缩放比例，默认0.5
        const targetW = (canvas.width = this.width * rate);
        const targetH = (canvas.height = this.height * rate);
        context.clearRect(0, 0, targetW, targetH);
        context.drawImage(img, 0, 0, targetW, targetH);
        canvas.toBlob(
          (blob) => {
            const imgFile = new File([blob], file.name, { type: file.type }); // 将blob对象转化为图片文件
            console.log(imgFile);
            if (imgFile.size > 2 * 1024 * 1024)
              return reject(message.error('图片压缩过后还是超过2m，请处理过后再进行上传'));
            resolve(imgFile);
          },
          file.type,
          rate,
        ); // file压缩的图片类型
      };
    });
  };