vue3上传图片，进行图片压缩（image-compressor.js）

在图片上传的过程中，如果图片体量过大，会很影响效率，并且在做某些特殊业务的时候，可能对上传图片的大小有限制，我们要么就对上传的文件进行限制，要么就对图片进行压缩后再上传，我这里采用了compressor.js

首先安装依赖

npm install image-compressor.js
yarn add image-compressor.js

然后我们可以先进行一个简单的封装

比如，在utils/compressFile中这样写

import ImageCompressor from 'image-compressor.js';
export default function compressFile(file) {
  return new Promise((resolve, reject) => {
    const options = {
      success(result) {
        // 将压缩后的 Blob 转换为 File 对象（如果组件支持Blob则不用这一步）
        const compressedFile = new File([result], file.name, {
          type: file.type,
          lastModified: Date.now(),
        });
        return resolve(compressedFile);
      },
      error(e) {
        return reject(e);
      },
    };
    // 1-3MB
    if (file.size > 1 * 1024 * 1024 && file.size <= 3 * 1024 * 1024) {
      options.quality = 0.3; // 压缩质量
      options.convertSize = false;//不进行图像尺寸的调整
      options.checkOrientation = false; // 图片翻转，默认为false
    }
    // 3-4MB
    if (file.size > 3 * 1024 * 1024 && file.size <= 4 * 1024 * 1024) {
      options.quality = 0.25; // 压缩质量
      options.convertSize = false;//不进行图像尺寸的调整
      options.checkOrientation = false; // 图片翻转，默认为false
    }
    // 5-6MB
    if (file.size > 5 * 1024 * 1024 && file.size <= 6 * 1024 * 1024) {
      options.quality = 0.2; // 压缩质量
      options.convertSize = false;//不进行图像尺寸的调整
      options.checkOrientation = false; // 图片翻转，默认为false
    }
    // 6-7MB
    if (file.size > 6 * 1024 * 1024 && file.size <= 7 * 1024 * 1024) {
      options.quality = 0.15; // 压缩质量
      options.convertSize = false;//不进行图像尺寸的调整
      options.checkOrientation = false; // 图片翻转，默认为false
    }
    // 7-9MB
    if (file.size > 7 * 1024 * 1024 && file.size <= 9 * 1024 * 1024) {
      options.quality = 0.1; // 压缩质量
      options.convertSize = false;//不进行图像尺寸的调整
      options.checkOrientation = false; // 图片翻转，默认为false
    }
    new ImageCompressor(file, options);
  });
}

这样我们就对不同大小的图片进行了一个简单判断，让其大部分保持在1MB左右，各位小伙伴可以根据自身实际情况写不同的算法，这里的options.quality就是压缩比例，一个7MB左右的图片， 在0.1压缩后，会变成七百KB左右

然后在项目中使用,我这里用vant举例

<template>
  <van-uploader 
    :max-size="9 * 1024 * 1024" @oversize="onOversize" 
    :preview-size="['47vw', '34vw']" 
    v-model="aaa"
    multiple 
    :after-read="afterRead" 
    :max-count="1" 
    @delete="beforeDelete('zheng')">
      <img class="upImg" src="@/assets/image/id1.png" alt="">
  </van-uploader>
</template>

<script setup>
import compressFile from '@/utils/compressFile';
import { closeToast, showToast } from "vant";
import { ref, onMounted } from 'vue'
import { closeToast, showToast } from "vant";

//对文件限制，你们可以根据实际情况来
const onOversize = () => {
  showToast('文件大小不能超过 9MB');
}

//对图片数据进行一个暂存
const aaa = ref([]) 

//上传
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  // 创建文件对象
  let blobFile = file.file
  compressFile(blobFile).then(res => {
    let formData = new FormData()
    formData.append('file', res)
    formData.append('instanceCode', 'minio')
    aaa.value[0].message = "上传中";
    aaa.value[0].status = "uploading";
    // return
    // 这里假装是你们的接口
    uploadImg(formData)
      .then((res) => {
        if (res.code == 200) {
          // 进行后续操作  
  
          aaa.value[0].message = "上传成功";
          aaa.value[0].status = "done";
        }
      })
      .catch(() => {
        closeToast();
        aaa.value[err.i].message = "上传失败";
        aaa.value[err.i].status = "failed";
      })
  })
};

const beforeDelete = (type) => {
  aaa.value.url= []
};
</script>

这样，我们就上传了一个压缩的图片，最大可以上传9MB的，并且会把较大的图片尽可能的压缩在1MB左右

这里大家也可以参考一下别人的文章，也不错，这里面是一些vue2的写法