問題:
最近在vue項目上,使用el-upload組件實現(xiàn)多文件上傳功能時出現(xiàn)了如下的報錯內(nèi)容创夜。
Uncaught TypeError: Cannot set properties of undefined (setting ‘status’)
原因:
vue項目的多文件上傳為重復(fù)調(diào)用同一接口杭跪,而非單次調(diào)用,由于需要控制單次批量上傳的文件個數(shù),需要在全部文件成功上傳后對上傳文件列表進行清空涧尿。上傳成功后fileList被清空會導(dǎo)致該問題產(chǎn)生系奉,無論是使用this.$refs.upload.clearFiles();或file-list="[]";姑廉,如果不在最后一個文件上傳結(jié)束后再清空都會提示該錯誤缺亮。
若多文件上傳時中間存在大文件,則最后一個上傳完成的文件應(yīng)為該大文件桥言,而不是原文件上傳列表的最后一個文件瞬内,需要重新進行判斷。
// 在全部文件完成上傳后調(diào)用限书,清空上傳列表
let isAllSuccess = true;for (let item of fileList) {
if (item.status != "success") {
isAllSuccess = false;
break;
}
}
if (isAllSuccess) {
// 清空上傳文件列表虫蝶,否則影響上傳文件數(shù)限制判斷
this.$refs.upload.clearFiles();
}