elementui上傳組件el-upload無法第二次上傳怎么解決

這篇“elementui上傳組件el-upload無法第二次上傳怎么解決”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“elementui上傳組件el-upload無法第二次上傳怎么解決”文章吧。

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組件 第二次上傳請求無效，非clearFiles方法

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

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

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

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

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

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

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

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

 觀察el-upload組件源碼會發(fā)現(xiàn)存儲文件的字段是 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(() => {})

User-agent: *
Disallow: /

以上就是關(guān)于“elementui上傳組件el-upload無法第二次上傳怎么解決”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。