1.先安装image-conversion插件
npm i image-conversion --save
2.设置文件限制大小,max-size以及设置组件api(before-read)
<van-uploader
multiple
:max-size = 'imgMaxSize'
:before-read = 'beforeRead'
accept = '.jpg,.jpeg,.png'
/>
multiple ==> 允许同时上传多张图片
imgMaxSize ==> 50 * 1024 *1024这里限制最大为50M
3.编写beforeRead方法进行文件压缩
import * as imageConversion from 'image-conversion'; //引入方法
async beforeRead(file) {
//是否是多张上传
if (Array.isArray(file)) {
for await (let i of file) {
new Promise((resolve, reject) => {
return imageConversion.compressAccurately(i, 5 * 1024).then(res => {
//这里5 * 1024是把大于5M的文件压缩到5M
//此时返回的数据是Blob数据,如果后台没有处理,还需要转成File数据
res = new File([res], i.name);
resolve(res);
})
})
}
} else {
return new Promise((resolve, reject) => {
imageConversion.compressAccurately(file, 5 * 1024).then(res =>{
res = new File([res], file.name);
resolve(res);
})
})
}
}