compressorjs压缩图片上传

对比效果如下

安装

yarn add compressorjs

import Compressor from "compressorjs";

封装压缩图片方法

/**
 * 图片压缩
 * @param {File} image 图片file.raw
 * @param {String} backType 需要返回的类型blob、file
 * @param {Number} quality 图片压缩比，数字越小，图片压缩越小
 * @return
 */
import Compressor from "compressorjs";
export function compressorImage(image, backType, quality) {
  return new Promise((resolve, reject) => {
    // eslint-disable-next-line no-new
    new Compressor(image, {
      quality: quality || 0.8,
      success(result) {
        if (!backType || backType === "blob") {
          resolve(result);
        } else if (backType === "file") {
          const file = new File([result], image.name, { type: image.type });
          resolve(file);
        } else if (backType === "base64") {
          const reader = new FileReader();
          reader.readAsDataURL(result);
          reader.onload = () => resolve(reader.result);
          reader.onerror = (error) => reject(error);
        }
      },
      error(err) {
        reject(err);
      }
    });
  });
}

  // 上传图片
    async onChange(file, fileList) {
      try {
         // 判断图片大小和格式
         const isJPG =
           file.type === 'image/jpeg' ||
           file.type === 'image/png' ||
           file.type === 'image/jpg' ||
           file.type === 'image/gif'

         const isLt2M = file.size / 1024 / 1024 < 2;

         if (!isJPG) {
           this.$message.error('上传头像图片只能是 JPG 格式!');
           this.fileList = []
           return false
         }
         if (!isLt2M) {
           this.$message.error('上传头像图片大小不能超过 2MB!');
           this.fileList = []
           return false
         }
        if (!file) {
          return;
        }
        const afterCompression_file = await compressorImage(file.raw, "file", 0.5);
        const formData = new FormData();
        formData.append("image", afterCompression_file);
        
        const resp = await UploadImage(formData);
        console.log("上传成功", resp);
      } catch (error) {
        console.log(error);
      }
    },

原文