需求:
在上传多个图片的时候有大小限制【不能超过100K】、支持多个上传
问题:
批量上传多个>100K的图片、就是弹出很多的toast、请问有什么方法解决?
需求:
在上传多个图片的时候有大小限制【不能超过100K】、支持多个上传
问题:
批量上传多个>100K的图片、就是弹出很多的toast、请问有什么方法解决?
额外加一个errList,过去直接弹toast的地方,改成把不合要求的文件放到errList里面。
在文件新加到上传队列的时候,用on-change检查
<template>
<div>
<el-upload
...
:on-change="verify"
...
/>
Over 100 KB Files
<div v-for="file in errList" :key="file.uid">
<i class="el-icon-close" style="color:red"/>{{file.name}}
</div>
</div>
</template>
<script>
...
methods:{
...
verify (file) {
if (file.size / 1024 > 100) {
// this.$message('file exceed 100KB.')
this.errList.push(file)
return false
}
},
...
}
...
</script>
测试图片:
效果:
//验证图片格式
validateJpgOrPng = (file) => {
return file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png';
}
// 验证图片大小
validateImgSize = (file) => {
return file.size / 1024 < 100;
}
//上传之前做限制
beforeUpload: file => {
if (!this.validateJpgOrPng(file)) {
message.error('请选择jpg/png格式图片');
return false;
}
if (!this.validateImgSize(file)) {
message.error('图片大小不能超过100K');
return false;
}
return false; //若返回 false 或者返回 Promise 且被 reject,则停止上传。
},
// 选择了文件再次验证
onChange: (file,fileList) => {
fileList = fileList.filter(file => this.validateJpgOrPng(file) && this.validateImgSize(file));
if (fileList.length > 6) { //这里根据你的需求限制
message.error('最多只能上传6张图片');
}
//只能上传6张
fileList = fileList.slice(0, 6); //这里根据你的需求进行截取,我这里是从前往后截取,你也可以从后往前截取
console.log(fileList) //最终拿到的图片列表
},
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
贴一下 => 目前我解决的方案:[加锁]