element-ui上传组件,通过自定义请求上传文件
记录使用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上传组件,通过自定义请求上传文件的更多相关文章
- vue问题三:element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- maven工程 java 实现文件上传 SSM ajax异步请求上传
java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...
- Element UI系列:Upload图片自定义上传
HTML部分代码 Javascript部分代码 CSS代码 样式部分可以自由调整 主要实现的原理是利用 http-request 的属性对上传进行自定义
- element ui 弹出组件的遮罩层在弹出层的上面的解决方法
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...
- 单独调用kindeditor的多图上传组件实现多图上传
本例是单独调用kindeditor多图上传的组件来进行多图上传,兼容性你懂得! 官方示例地址:http://kindeditor.net/ke4/examples/multi-image-dialog ...
- Vue+element UI实现分页组件
介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...
- element ui 下拉框绑定对象并且change传多个参数
废话不说直接上代码说明真相. <template> <div class="hello"> <span>可以设置的属性 value-key=&q ...
随机推荐
- 数据库SQL语言从入门到精通--Part 3--SQL语言基础知识
数据库从入门到精通合集(超详细,学习数据库必看) 一.关系 单一的数据结构----关系 现实世界的实体以及实体间的各种联系均用关系来表示 逻辑结构----二维表 从用户角度,关系模型中数据的逻辑结构是 ...
- Windows 10配置VS Code C++环境(超详细,面向小白以及大佬们)
看完这个,还有下一篇:门在这 我看了网上的大佬们配的我是在是看不懂啊?我是一个小白啊?这太难了,这阻挡不了我,想使用这很骚的IDE,于是在不断的摸索下,终于配置成功,小白们也不用慌,这次非常简单.一定 ...
- Codeforce 1251C. Minimize The Integer
C. Minimize The Integer time limit per test2 seconds memory limit per test256 megabytes inputstandar ...
- codeforce 270B Multithreading
B. Multithreading Emuskald is addicted to Codeforces, and keeps refreshing the main page not to miss ...
- 线性回归 - LinearRegression - 预测糖尿病 - 量化预测的质量
线性回归是分析一个变量与另外一个或多个变量(自变量)之间,关系强度的方法. 线性回归的标志,如名称所暗示的那样,即自变量与结果变量之间的关系是线性的,也就是说变量关系可以连城一条直线. 模型评估:量化 ...
- Spring AOP概述
一.AOP的基本概念: 首先先给出一段比较专业的术语: 在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的 ...
- golang教程汇总
A Tour of Go Go编程基础 Go 语言圣经 中文版
- CtsSecurityTestCases#ListeningPortsTest定位tcp端口与pid
CtsSecurityTestCases#ListeningPortsTest定位tcp端口与pid [问题描述] cts失败项 armeabi-v7a CtsSecurityTestCases an ...
- Navicat,SQL注入,pymysql模块
# 关键字exists(了解) 只返回布尔值 True False 返回True的时候外层查询语句执行 返回False的时候外层查询语句不再执行 select * from emp where exi ...
- nginx代理路径配置总结
一.发现问题 配置nginx代理的时候,发现location配置的路径和代理的上下文路径的组合不同,服务端接收到的uri的路径不同,导致了controller的RequestMapping匹配出现问题 ...