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

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

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

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

無需上傳服務器的文件取消或者再次上傳時失效的問題

<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">點這，或者拖到著</em></div>
</el-upload>

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

敲黑板?。。?！

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

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

el upload組件第二次上傳請求無效，非clearFiles方法

開發(fā)時遇到一個業(yè)務需求：

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

直接調(diào)用 submit 會無響應

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

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

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

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

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

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

el-upload組件部分源碼：

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

最后貼上正確步驟

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