记录使用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. 看了就会的VScode给C++的配置编译环境(Visual Studio Code)

    我看了网上的大佬们配的我是在是看不懂啊?我是一个小白啊?这太难了,这阻挡不了我,想使用这很骚的IDE,于是在不断的摸索下,终于配置成功,小白们也不用慌,这次非常简单.一定可以的. 1.下载 VS Co ...

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

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

  3. UVA-2【NOI2014】起床困难综合症

    #2. [NOI2014]起床困难综合症 21 世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm 一直坚持与起床困难综合症作斗争.通过 ...

  4. 虚拟化云计算平台Proxmox VE

    1.虚拟化技术介绍 1.1.OpenVZ 简介 OpenVZ 是开源软件, 是基于Linux平台的操作系统级服务器虚拟化解决方案,它是基于Linux内核和作业系统的操作系统级虚拟化技术. OpenVZ ...

  5. 算法——Java实现栈

    栈 定义: 栈是一种先进后出的数据结构,我们把允许插入和删除的一端称为栈顶,另一端称为栈底,不含任何元素的栈称为空栈 栈的java代码实现: 基于数组: import org.junit.jupite ...

  6. YOLACT : 首个实时one-stage实例分割模型,29.8mAP/33.5fps | ICCV 2019

    论文巧妙地基于one-stage目标检测算法提出实时实例分割算法YOLACT,整体的架构设计十分轻量,在速度和效果上面达到很好的trade-off.   来源:[晓飞的算法工程笔记] 公众号 论文: ...

  7. F - Watching Fireworks is Fun

    C. Watching Fireworks is Fun 题目大意: 一个城镇有n个区域,从左到右1-n,每个区域之间距离1个单位距离.节日中有m个烟火要放,给定放的地点a[ i ].时间t[ i ] ...

  8. shell命令之巧用cut

    需求:取出日志中ip字段,并进行统计排序 .一般用用awk命令 假如ip地址为第一个字段 那么 awk ‘{print $1}’ 文件名 |sort |uniq -c|sort-nr 那如果不是第一个 ...

  9. 解密C语言编译背后的过程

    我们大部分程序员可能都是从C语言学起的,写过几万行.几十万行.甚至上百万行的代码,但是大家是否都清楚C语言编译的完整过程呢,如果不清楚的话,我今天就带着大家一起来做个解密吧. C语言相对于汇编语言是一 ...

  10. 【Spark】RDD(Resilient Distributed Dataset)究竟是什么?

    目录 基本概念 官方文档 概述 含义 RDD出现的原因 五大属性 以单词统计为例,一张图熟悉RDD当中的五大属性 解构图 RDD弹性 RDD特点 分区 只读 依赖 缓存 checkpoint 基本概念 ...