解決elementui上傳組件el-upload無法第二次上傳問題

更新時(shí)間：2023年03月28日 09:53:58 作者：danbing2226

這篇文章主要介紹了解決elementui上傳組件el-upload無法第二次上傳問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

elementui上傳組件el-upload無法第二次上傳

無需上傳服務(wù)器的文件取消或者再次上傳時(shí)失效的問題

<el-upload class="upload-demo" ref="upload" drag action="" :limit="1" accept=".csv" :show-file-list="false" :before-upload="onClickCsvBeforeupload">
?? ?<i class="el-icon-upload"></i>
?? ?<div class="el-upload__text">點(diǎn)這，或者拖到著</em></div>
</el-upload>

在組件中添加ref="upload"屬性，無法第二次上傳，主要原因是瀏覽器還保存著，我們已經(jīng)上傳的文件（無論你是否符合你的要求）。

敲黑板！?。?！

this.$children[0].$children[0].$refs.upload.clearFiles();

主要是我們沒有清除文件造成的，可以根據(jù)你的項(xiàng)目，用Document找到refs，然后參照上面的做法就可以再次上傳了。困擾了我好久的問題，希望能幫到你。

el upload組件第二次上傳請(qǐng)求無效，非clearFiles方法

開發(fā)時(shí)遇到一個(gè)業(yè)務(wù)需求：

導(dǎo)入時(shí)如果當(dāng)前列表月份存在數(shù)據(jù)將會(huì)提示用戶是否要覆蓋當(dāng)前數(shù)據(jù)，點(diǎn)擊確定進(jìn)行二次提交

直接調(diào)用 submit 會(huì)無響應(yīng)

  this.$confirm(`${response.msg},是否繼續(xù)？`, '提示', {
          confirmButtonText: 確定,
          cancelButtonText: 取消,
          type: 'warning'
        }).then((res) => {
            // 直接提交會(huì)無響應(yīng)
         this.$refs.upload.submit();
          
          }).catch(() => {})

查詢其他資料會(huì)發(fā)現(xiàn) 大多數(shù)會(huì)讓你調(diào)用

 this.$refs["upload"].clearFiles()

這樣的話會(huì)讓用戶重新添加，那么如何去節(jié)省該步驟呢？

當(dāng)?shù)谝淮紊蟼鞒晒蠡卣{(diào) on-success 方法可以獲取到上傳的文件，這時(shí)可以進(jìn)行保存

觀察el-upload組件源碼會(huì)發(fā)現(xiàn)存儲(chǔ)文件的字段是 uploadFiles

el-upload組件部分源碼：

因此可以自行調(diào)用該方法，去主動(dòng)觸發(fā)handleStart()方法進(jìn)行上傳

最后貼上正確步驟

  this.$confirm(`${response.msg},是否繼續(xù)？`, '提示', {
          confirmButtonText: 確定,
          cancelButtonText: 取消,
          type: 'warning'
        }).then((res) => {
            // 先刪除
          this.$refs["upload"].clearFiles()
          this.$nextTick(() => {
            // 再導(dǎo)入
            this.$refs["upload"].handleStart(this.fileList[0].raw)
            this.isUpdateSupport = 1
            // 再提交上傳
            this.$refs.upload.submit();
          })
          
          }).catch(() => {})