解决el-upload批量上传只执行一次成功回调on-success的问题

目录

• el-upload批量上传只执行一次成功回调on-success
• el-upload自定义上传后回调上传成功和失败事件
• 总结

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）

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。