下包

npm i compressorjs

单独封装

import Compressor from "compressorjs";

export function compressImageWithCompressor(file, quality = 0.7) {
  // quality: 压缩质量，范围为 0 ~ 1，默认是 0.7（值越小，压缩率越高，质量越低）
  return new Promise((resolve, reject) => {
    new Compressor(file, {
      quality,
      convertSize: 0,   // 强制所有图片都进行压缩并转换为 JPEG png的图片不压缩
      mimeType: "image/jpeg",  // 输出格式设为 JPEG
      maxWidth: 1024, // 限制最大宽度
      maxHeight: 760, // 限制最大高度 ， 会根据宽高等比例压缩图片的宽高
      success(result) {
        resolve(result);
      }, 
      error(err) {
        reject(err);
      },    
    });
  });
}

使用

    async changeHander(file, fileList) {
        const compressedBlob = await compressImageWithCompressor(file.raw);
        // 把压缩后的 Blob 数据转成 File 对象
        const compressedFile = new File([compressedBlob], file.name, {
            type: file.type,
          });
    },

// 多个图片有删除的时候，循环fileList替换 file ，牵扯到删除。

注意：

<el-upload> 中
before-upload 返回的 file就是 file格式
on-change 返回的file有嵌套 file 的 raw才是 file 格式

如果是使用elementui的自动上传使用 before-upload，如果有单独的上传按钮，使用 on-change，示例就是 on-change，有嵌套。

等比例缩放宽高举例