问题:
最近在vue项目上,使用el-upload组件实现多文件上传功能时出现了如下的报错内容。
Uncaught TypeError: Cannot set properties of undefined (setting ‘status’)
原因:
vue项目的多文件上传为重复调用同一接口,而非单次调用,由于需要控制单次批量上传的文件个数,需要在全部文件成功上传后对上传文件列表进行清空。上传成功后fileList被清空会导致该问题产生,无论是使用this.$refs.upload.clearFiles();或file-list="[]";,如果不在最后一个文件上传结束后再清空都会提示该错误。
若多文件上传时中间存在大文件,则最后一个上传完成的文件应为该大文件,而不是原文件上传列表的最后一个文件,需要重新进行判断。
// 在全部文件完成上传后调用,清空上传列表
let isAllSuccess = true;for (let item of fileList) {
if (item.status != "success") {
isAllSuccess = false;
break;
}
}
if (isAllSuccess) {
// 清空上传文件列表,否则影响上传文件数限制判断
this.$refs.upload.clearFiles();
}