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怎么解决”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。