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

 更新时间:2023年03月28日 16:04:59   作者:小宝&  
这篇文章主要介绍了解决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)

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue报错Cannot read properties of undefined (...)类型的解决办法

    vue报错Cannot read properties of undefined (...)类型的解决办法

    这篇文章主要给大家介绍了关于vue报错Cannot read properties of undefined (...)类型的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-04-04
  • Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑指南

    Vue Element UI 中 el-table 树形数据 

    这篇文章主要介绍了Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑指南,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue 本地服务不能被外部IP访问的完美解决方法

    vue 本地服务不能被外部IP访问的完美解决方法

    这篇文章主要介绍了vue 本地服务不能被外部IP访问的解决方法,本文通过代码讲解的非常详细,需要的朋友可以参考下
    2018-10-10
  • 基于vue+electron实现文件下载打开wps预览

    基于vue+electron实现文件下载打开wps预览

    这篇文章主要给大家介绍了基于vue+electron实现文件下载打开wps预览,文中有详细的代码示例供大家借鉴参考,感兴趣的同学可以参考阅读下
    2023-08-08
  • vuex的module模块用法示例

    vuex的module模块用法示例

    这篇文章主要介绍了vuex的module模块用法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 使用jenkins一键打包发布vue项目的实现

    使用jenkins一键打包发布vue项目的实现

    这篇文章主要介绍了使用jenkins一键打包发布vue项目的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Vue3+element实现表格数据导出

    Vue3+element实现表格数据导出

    这篇文章主要为大家学习介绍了Vue3如何利用element实现表格数据导出功能,文中的示例代码讲解详细,感兴趣的小伙伴快跟随小编一起学习一下吧
    2023-07-07
  • 快速解决vue2+vue-cli3项目ie兼容的问题

    快速解决vue2+vue-cli3项目ie兼容的问题

    这篇文章主要介绍了快速解决vue2+vue-cli3项目ie兼容的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3使用vuedraggable和grid实现自定义拖拽布局方式

    vue3使用vuedraggable和grid实现自定义拖拽布局方式

    这篇文章主要介绍了vue3使用vuedraggable和grid实现自定义拖拽布局方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vitepress的文档渲染基础教程

    Vitepress的文档渲染基础教程

    这篇文章主要为大家介绍了Vitepress的文档渲染基础教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10

最新评论