element ui上傳組件,開啟多圖上傳時(shí)報(bào)錯(cuò),列表顯示一個(gè)成功,實(shí)際圖片都已經(jīng)上傳成功。
報(bào)錯(cuò)如下:
Uncaught TypeError: Cannot set properties of null (setting 'status')
<el-upload
ref="upload"
:limit="5"
accept=".pdf"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
:data="upload"
multiple
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
將文件拖到此處,或
<em>點(diǎn)擊上傳</em>
</div>
<div class="el-upload__tip" style="color:red" slot="tip">提示:僅允許導(dǎo)入“pdf”格式文件!</div>
</el-upload>
網(wǎng)上有解決方案
1,:file-list="imageList"指定文件列表為imageList解決方案,嘗試過不行
2,有在提交下面增加延時(shí)和清空方法,問題來了,你怎么知道5s就執(zhí)行完成了,時(shí)間卡的這么死,所以不行
setTimeout(() => {
this.$refs.upload.clearFiles();
}, 5000);
3,睜開你的卡姿蘭大眼睛,解決辦法來了
分析原因:多文件上傳,文件是一次次調(diào)用上傳的,所以on-success的成功方法是多次調(diào)用,清空早了就會(huì)導(dǎo)致問題,所以我們要等文件都上傳成功了再清空吧
定義一個(gè)fileCount:0
在上傳成功方法里
handleFileSuccess(response, file, fileList) {
if(response.code==200){ //你項(xiàng)目的上傳成功code,根據(jù)具體項(xiàng)目來哦
this.fileCount++
}
if(this.fileCount == fileList.length){
//這邊可以干其它事情
//下面三句是重點(diǎn),關(guān)閉彈框,清空項(xiàng)目,個(gè)數(shù)置0
this.upload.open = false;
this.$refs.upload.clearFiles();
this.fileCount = 0;
}
}