解決el-upload批量上傳隻執行一次成功回調on-success的問題

Posted on by

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）

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：