在图片上传的过程中，如果图片体量过大，会很影响效率，并且在做某些特殊业务的时候，可能对上传图片的大小有限制，我们要么就对上传的文件进行限制，要么就对图片进行压缩后再上传，我这里采用了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-3MBif (file.size > 1 * 1024 * 1024 && file.size <= 3 * 1024 * 1024) {options.quality = 0.3; // 压缩质量options.convertSize = false;//不进行图像尺寸的调整options.checkOrientation = false; // 图片翻转，默认为false}// 3-4MBif (file.size > 3 * 1024 * 1024 && file.size <= 4 * 1024 * 1024) {options.quality = 0.25; // 压缩质量options.convertSize = false;//不进行图像尺寸的调整options.checkOrientation = false; // 图片翻转，默认为false}// 5-6MBif (file.size > 5 * 1024 * 1024 && file.size <= 6 * 1024 * 1024) {options.quality = 0.2; // 压缩质量options.convertSize = false;//不进行图像尺寸的调整options.checkOrientation = false; // 图片翻转，默认为false}// 6-7MBif (file.size > 6 * 1024 * 1024 && file.size <= 7 * 1024 * 1024) {options.quality = 0.15; // 压缩质量options.convertSize = false;//不进行图像尺寸的调整options.checkOrientation = false; // 图片翻转，默认为false}// 7-9MBif (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.filecompressFile(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的写法