el-upload前端实现多文件上传功能示例

 更新时间:2024年07月22日 08:31:48   作者:Sample_浅浅未央  
在Vue.js中可以使用Element UI库中的<el-upload>组件来实现多文件上传的功能,这篇文章主要给大家介绍了关于el-upload前端实现多文件上传功能的相关资料,需要的朋友可以参考下

template中:

    <el-upload
            class="upload-demo"
            ref="fileUpload1"
            :file-list="fileList1"
            action=""
            :on-exceed="handleExceed1"
            :http-request="httpRequest1"
            :on-remove="handleRemove1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>

script中:

data:

 formdata1: new FormData(), //创建FormData1对象

methods:

 methods: {
    handleExceed1(file, fileList) {
      //上传的过程中触发的函数
    },
    httpRequest1(file) {
      //上传完毕触发的函数
      this.formdata1.append("new_files", file.file);
    },
    handleRemove1(file, fileList) {
      /**
       * 检测删除的file是否是新加入的file文件 如果不是,删除就给与md5的值
       */
      if ((file.raw != undefined && file.raw instanceof File) == false) {
        this.deleteFiles1 += file.md5 + ",";
      }
    },  
  },

提交的时候:

 this.formdata1 = new FormData(); //创建FormData对象
        this.formdata1.append("fault_no", this.$route.query.fault_no);
        this.formdata1.append("progress", "1");
        this.formdata1.append("step", n);
        this.formdata1.append("files_to_delete", this.deleteFiles1);//删除的文件的id值
        this.$refs.fileUpload1.submit();//用来提交文件上传的file格式文件组
        updateFaultFile(this.formdata1).then((res) => {
          if (res.resCode === 20000) {
            this.$message.success("更新成功");
          } else {
            this.$message.error("更新失败");
          }
        });

如果仅仅是单文件上传的话:直接在提交的时候传入 

this.formdata1.append("new_files", this.fileList[0]);

就可以了

总结

到此这篇关于el-upload前端实现多文件上传功能的文章就介绍到这了,更多相关el-upload前端多文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vite项目的根目录中的env.d.ts类型声明文件里要写什么

    vite项目的根目录中的env.d.ts类型声明文件里要写什么

    这篇文章主要介绍了vite项目的根目录中的env.d.ts类型声明文件里要写什么,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue print.js打印支持Echarts图表操作

    vue print.js打印支持Echarts图表操作

    这篇文章主要介绍了vue print.js打印支持Echarts图表操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue防抖与节流的使用介绍

    Vue防抖与节流的使用介绍

    防抖和节流的作用都是防止函数多次调用,下面这篇文章主要给大家介绍了关于vue函数防抖与节流的正确使用方法,需要的朋友可以参考下
    2022-12-12
  • Vue实现验证码功能

    Vue实现验证码功能

    这篇文章主要为大家详细介绍了Vue实现验证码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • Vue新搭档TypeScript快速入门实践记录

    Vue新搭档TypeScript快速入门实践记录

    TypeScript 是一种由微软开发的自由和开源的编程语言,它是 JavaScript 的一个超集,扩展了 JavaScript 的语法。这篇文章主要介绍了Vue新搭档TypeScript快速入门实践,需要的朋友可以参考下
    2021-06-06
  • vue中get方法\post方法如何传递数组参数详解

    vue中get方法\post方法如何传递数组参数详解

    在前后端交互的时候,有时候需要通过get或者delete传递一个数组给后台,下面下面这篇文章主要给大家介绍了关于vue中get方法\post方法如何传递数组参数,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue 使用html2canvas将DOM转化为图片的方法

    vue 使用html2canvas将DOM转化为图片的方法

    这篇文章主要介绍了vue 使用html2canvas将DOM转化为图片的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue的keep-alive用法技巧

    vue的keep-alive用法技巧

    在本篇文章里小编给大家整理的是关于vue的keep-alive用法技巧以及实例代码,需要的朋友们学习下。
    2019-08-08
  • vue+SpringBoot使用WebSocket方式

    vue+SpringBoot使用WebSocket方式

    WebSocket是一种全双工通信协议,通过HTTP升级机制建立连接,支持实时双向数据传输,示例代码展示了如何在Java Spring Boot和Vue.js中实现WebSocket服务和客户端
    2025-02-02
  • Vue3+Vite+ElementPlus构建学习笔记

    Vue3+Vite+ElementPlus构建学习笔记

    这篇文章主要介绍了Vue3+Vite+ElementPlus构建的相关资料,文中还介绍如何在Vue3项目中加入ElementPlus库,并提供了完整引入的示例,需要的朋友可以参考下
    2024-12-12

最新评论