最近在使用Upload组件时遇到个问题,官方文档中竟然没有对于文件数量的处理,这让我需要校验上传数量时,无从下手。于是通过,手动上传+模拟防抖的处理,婉转实现对数量的校验。
参考代码如下:
// template Upload部分代码
<Upload
ref="upload"
:before-upload="handleUpload"
:on-success="handleSuccess"
multiple
action="接口地址">
<div class="btn">添加上传</div>
</Upload>
// script
<script>
export default {
data() {
return {
timer: null, // setTimeout 计时器
uploadList:[], // 获取上传列表
};
},
methods: {
// 重置
clear() {
this.timer = null;
this.breakpointUploadList = [];
},
// 通过防抖,使用手动上传代替自动上传效果
debounceUpload() {
if (this.timer !== null) {
clearTimeout(this.timer); // 清除计时器
}
this.timer = setTimeout(() => {
if(this.uploadList?.length > 10) {
this.$Message.error("上传文件数量不能大于10");
this.clear();
return false;
}
this.uploadList.forEach((item) => {
this.$refs[uploadType].post(item); // 触发被中止的上传
});
this.clear();
}, 1000);
},
handleUpload(file) {
this.uploadList.push(file); // 收集文件数量
this.debounceUpload();
return false; // 阻止自动上传
},
handleSuccess (res, file) {
// 手动执行上传后,已经可以触发Upload的钩子函数
console.log("上传成功")
},
},
};
</script>
官方文档参考:http://v1.iviewui.com/components/upload#DX
结语
后续会更新Upload组件,上传时实时状态更新的逻辑处理,也是官方文档中未描述清楚的内容。