【vue】文件批量上傳報(bào)錯(cuò)問題解決Uncaught TypeError: Cannot set properties of undefined (setting ‘status‘)

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;
      }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容