在图片上传的过程中,如果图片体量过大,会很影响效率,并且在做某些特殊业务的时候,可能对上传图片的大小有限制,我们要么就对上传的文件进行限制,要么就对图片进行压缩后再上传,我这里采用了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的写法