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

Posted on by

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

在多選文件上傳時，會循環調用上傳方法。在第一次循環時，文件可以正常上傳，第二次開始就會在

progress事件中報錯：

嘗試上傳2個文件，在這裡打印progress事件的參數：

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

本人目前還不知道是什麼原因造成瞭這個結果。但是經過查找相關問題找到瞭解決辦法：

在進行文件多選上傳的時候，創建一個中間變量去進行對文件的添加和刪除操作，原有的filelist隻進行頁面列表的顯示，在提交表單的時候對數據進行處理，將中間變量的值重新賦給接口需要的字段。這麼做的目的就是避免去直接操作filelist。

這裡隻展示關鍵部分代碼：

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

          // file返回的數據很多，隻添加需要的數據
          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多選文件上傳 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：