记录使用element-ui上传组件,通过自定义请求上传文件需要注意的地方。

<el-upload
ref="uploadMutiple"
:auto-upload="false"
action="Fake Action"
:on-success="allHandleSuccess"
:on-change="handleChange"
:file-list="fileList"
:http-request="allUpload"
:before-upload="before_upload"
multiple
>选取文件</el-upload> <el-button type="primary" size="small" @click="submitUpload">上传</el-button>

首先关闭自动上传,并给随便给action赋值一个字符串。(action是必填属性)

       :auto-upload="false"
action="Fake Action"

通过:on-change钩子函数,拿到文件列表:

    handleChange(file, fileList) {
this.fileList = fileList;
},

一般情况下,我们在submitUpload()的点击事件中去触发上传:

submitUpload() {
this.$refs.uploadMutiple.submit();
}

之后组件会触发:http-request钩子行数。需要注意的是,这里你的fileList中有几个文件,就会执行几次:http-request钩子函数。这意味着,如果你把上传请求写在:http-request钩子函数中,就会造成重复不必要的请求。直接在submitUpload()中写post请求即可。只需要把文件封装为formData对象,作为参数传给后台即可。

      let formData = new FormData();
this.fileList.forEach(item => {
formData.append("files", item.raw);
}); this.axios.post(api, formData);

下面是后台接口的写法:

public JSONResponse archiveBatchImport(@RequestParam("files") MultipartFile[] files){}

element-ui上传组件,通过自定义请求上传文件的更多相关文章

  1. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  2. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  3. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  4. maven工程 java 实现文件上传 SSM ajax异步请求上传

    java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...

  5. Element UI系列:Upload图片自定义上传

    HTML部分代码 Javascript部分代码 CSS代码 样式部分可以自由调整 主要实现的原理是利用 http-request 的属性对上传进行自定义

  6. element ui 弹出组件的遮罩层在弹出层的上面的解决方法

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...

  7. 单独调用kindeditor的多图上传组件实现多图上传

    本例是单独调用kindeditor多图上传的组件来进行多图上传,兼容性你懂得! 官方示例地址:http://kindeditor.net/ke4/examples/multi-image-dialog ...

  8. Vue+element UI实现分页组件

    介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...

  9. element ui 下拉框绑定对象并且change传多个参数

    废话不说直接上代码说明真相. <template> <div class="hello"> <span>可以设置的属性 value-key=&q ...

随机推荐

  1. USACO Training Section 1.1 坏掉的项链Broken Necklace

    题目描述 你有一条由N个红色的,白色的,或蓝色的珠子组成的项链(3<=N<=350),珠子是随意安排的. 这里是 n=29 的二个例子: 第一和第二个珠子在图片中已经被作记号. 图片 A ...

  2. 思维+模拟--POJ 1013 Counterfeit Dollar

    Sally Jones has a dozen Voyageur silver dollars. However, only eleven of the coins are true silver d ...

  3. POJ 2230 Watchcow 欧拉回路的DFS解法(模板题)

    Watchcow Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 9974 Accepted: 4307 Special Judg ...

  4. HDU 1233 最小生成树模板题,练练模板

    还是畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  5. undef用法

    #undef的语法 定义:#undef 标识符,用来将前面定义的宏标识符取消定义. 整理了如下几种#undef的常见用法. 1. 防止宏定义冲突在一个程序块中用完宏定义后,为防止后面标识符冲突需要取消 ...

  6. libevhtp初探

    libevent的evhttp不适合多线程,libevhtp重新设计了libevent的http API,采用了和memcached类似的多线程模型. worker线程的管道读事件的回调函数为htp_ ...

  7. C# 基础知识系列- 16 开发工具篇

    0. 前言 这是C# 基础知识系列的最后一个内容讲解篇,下一篇是基础知识-实战篇.这一篇主要讲解一下C#程序的结构和主要编程工具. 1. 工具 工欲善其事必先利其器,在实际动手之前我们先来看看想要编写 ...

  8. windows远程执行命令总结

    1. 利用Impacket Impacket是一个Python类库,用于对SMB1-3或IPv4 / IPv6 上的TCP.UDP.ICMP.IGMP,ARP,IPv4,IPv6,SMB,MSRPC, ...

  9. 软件——IDEA中如何去掉警告虚线

    初次安装使用IDEA,总是能看到导入代码后,出现很多的波浪线,下划线和虚线,这是IDEA给我们的一些提示和警告,但是有时候我们并不需要,反而会让人看着很不爽,这里简单记录一下自己的调整方法,供其他的小 ...

  10. Re模块练习题

    import re s = "1 -2*(60+(-40.35/5)-(-4*3))" # 获取所有数字 ret = re.findall(r"\d+", s) ...