el-upload多選文件上傳報錯解決方案

更新時間：2022年07月10日 09:27:34 作者：暫時想不到叫什么

本文主要介紹了el-upload多選文件上傳報錯解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

在element-ui中，el-upload可以進行文件多選操作。

在多選文件上傳時，會循環(huán)調(diào)用上傳方法。在第一次循環(huán)時，文件可以正常上傳，第二次開始就會在

progress事件中報錯：

嘗試上傳2個文件，在這里打印progress事件的參數(shù)：

會發(fā)現(xiàn)在第二次循環(huán)的時候，事件獲取不到file，所以接下來的操作無法正常進行。如果不處理這個問題的話，上傳方法依然可以使用，只不過最終傳上去的只是第一個文件。

本人目前還不知道是什么原因造成了這個結(jié)果。但是經(jīng)過查找相關問題找到了解決辦法：

在進行文件多選上傳的時候，創(chuàng)建一個中間變量去進行對文件的添加和刪除操作，原有的filelist只進行頁面列表的顯示，在提交表單的時候?qū)?shù)據(jù)進行處理，將中間變量的值重新賦給接口需要的字段。這么做的目的就是避免去直接操作filelist。

這里只展示關鍵部分代碼：

    /**
     * file：上傳成功后的文件參數(shù)
     * isMultiple：true=>多選；false：=>單選
     */
    handlePictureSuccess(file,isMultiple){
        // 單選、多選是可配字段，在這里進行分別處理
        if(isMultiple){
          
          ···

          // file返回的數(shù)據(jù)很多，只添加需要的數(shù)據(jù)
          this.realFileList.push({path:file.path,name:file.name,url:file.url})

          ···

        }else{

          ···

          this.fileList.push({path:file.path,name:file.name,url:file.url})

          ···

        }
    },

    /**
     * 提交表單
     * form：表單
     */
    submitFn(form){

      ···
      const fileList = []
      this.$refs.Form.realFileList.forEach(el=>{
        fileList.push(el)
      })

      ···

    },

到此這篇關于el-upload多選文件上傳報錯解決方案的文章就介紹到這了,更多相關el-upload多選文件上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: