el-upload批量上傳只執行一次成功回調on-success怎么解決

本文小編為大家詳細介紹“el-upload批量上傳只執行一次成功回調on-success怎么解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“el-upload批量上傳只執行一次成功回調on-success怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

el-upload批量上傳只執行一次成功回調on-success

刪除掉：

file-list="fileList"

在網上找了下解決方法，發現取消file-list綁定即可，網上也有自定義的上傳事件的方法，不過這個操作起來更方便一些。

上面方法還是有點問題，正確的方法是在后臺拉數據的時候，創建一個臨時變量filelist2,然后將后臺的數據filelist賦值給filelist2,再將filelist2綁定（:file-list="filelist2"）

然后對數據的操作都在filelist中。

el-upload自定義上傳后回調上傳成功和失敗事件

template部分：

<el-upload
  class="el_upload_above"
  action=""
  ref="upload"
  :limit="limitnum"
  list-type="picture-card"
  :http-request="uploadSectionFile"
  :auto-upload="true"
  :file-list="fileList"
  :on-error="uploadFileError"
  :on-success="uploadFileSuccess"
  :on-exceed="exceedFile"
  :on-remove="removeFile">
</el-upload>

script部分：

<script>
  export default {
    data() {
      return {
          fileList:[],//上傳的文件列表
          limitnum:2,//最大允許上傳個數 
      };
    },
    methods: {
        //自定義上傳
        uploadSectionFile(param){
             var fileObj = param.file;
          var form = new FormData();
           // 文件對象
          form.append("file", fileObj);
          this.$axios.post('/file/upload',form).then(res => {
            param.onSuccess(res)
          }).catch(({err}) => {
            param.onError(err)
          })  
        },
          //上傳失敗
        uploadFileError(err, file, fileList){
          this.$message.error("上傳失敗！")
        },
          //上傳成功
        uploadFileSuccess(response, file, fileList){
          if(response.data.error==0){
            file.response=response.data.data;
            this.fileList.push(file)
          }else{
            this.$message.error(response.data.message);//文件上傳錯誤提示
          }
        },
        // 文件超出個數限制時的鉤子
        exceedFile(files, fileList){
          this.$message.error('只能上傳'+this.limitnum+'個文件');
        },
        //刪除文件
        removeFile(file,fileList) {
          this.fileList=fileList;
        },
    }
  }
</script>

注釋

自定義上傳后，成功和失敗需要在自定義上傳代碼中觸發（onSuccess / onError）。在組件部分需要寫文件上傳或失敗的回調事件（uploadFileSuccess / uploadFileError）

讀到這里，這篇“el-upload批量上傳只執行一次成功回調on-success怎么解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。