【vue】图片压缩上传

 一、需求说明

在上传之前，把选中的图片压缩到100KB以内。

二、解决方法

使用 image-conversion 图片压缩插件

1、安装

yarn add image-conversion

2、引入

import * as imageConversion from 'image-conversion'

3、使用

// 将图片压缩至100KB以内（100即100KB）
imageConversion.compressAccurately(file, 100).then(async res => {
    res = new File([res], file.name, {
        type: res.type,
        lastModified: Date.now()
    });
    // 这个 res 就是压缩后的图片
});


// 错误写法：会造成压缩后图片格式丢失
// const blob = await imageConversion.compressAccurately(file, 100);

 ps：

插件官方文档地址 image-conversion - npm

三、详细代码 

    /**
     * @description: 上传钩子
     * @param {object} file 文件
     * @return {*}
     */
    const beforeUploadFile = async file => {
      modalData.file = "";
      // 文件后缀
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      let whiteList = ["png", "jpg"];
      // 限制上传文件类型
      if (whiteList.indexOf(fileSuffix) === -1) {
        message.warning("上传文件格式不正确");
      } else {
        let formData = new FormData();
        // 如果图片大于100kb，则压缩后再上传
        if (file.size / 1024 > 100) {
          // 压缩图片至100KB以内
          imageConversion.compressAccurately(file, 100).then(async res => {
            res = new File([res], file.name, {
              type: res.type,
              lastModified: Date.now()
            });
            modalData.file = res;
            formData.append("file", modalData.fileList);
            formData.append("id", picInfo.id);
            await uploadFiles(formData);
          });
        } else {
          modalData.file = file;
          formData.append("file", modalData.fileList);
          formData.append("id", picInfo.id);
          await uploadFiles(formData);
        }
      }

      return false;
    };

四、参考链接

vue3+vant3 图片压缩上传_compressaccurately-CSDN博客