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语言基础知识
数据库从入门到精通合集(超详细,学习数据库必看) 一.关系 单一的数据结构----关系 现实世界的实体以及实体间的各种联系均用关系来表示 逻辑结构----二维表 从用户角度,关系模型中数据的逻辑结构是 ...
- 2019 ICPC 银川网络赛 F-Moving On (卡Cache)
Firdaws and Fatinah are living in a country with nn cities, numbered from 11 to nn. Each city has a ...
- CentOS启用iptables防火墙
centos 7默认的防火墙使用firewall,系统服务管理方式也变更了,可以通过systemctl命令控制. 可以参考这个链接 但是习惯用iptables,可以按下面的操作改下 1.关闭firew ...
- python call java jar
python脚本如何调用Java的jar文件呢? HelloWorld.java public class HelloWorld { public static void main(String[] ...
- 2020年python开发微信小程序,公众号,手机购物商城APP
2020年最新的技术全栈,手机短信注册登陆等运用, 精准定位用户 支付宝支付 以及前后端从0到大神的全部精解 2020年最新的技术全栈,手机短信注册登陆等运用, 精准定位用户 支付宝支付 以及前后端从 ...
- SAP登录消息提醒
1功能说明 在相应用户登录时,给其提示相关信息. 2功能实现 2.1函数实现 在函数NAVIGATION_SET_START_TCODE中注册要监听的用户和程序的事务代码,当用户登录时,将自动运行 ...
- input在IOS中的聚焦问题
关于input输入框在iPhone手机中的聚焦问题,开发中是会经常遇到的,在一般的浏览器中,我们一般是通过 document.getElementById('opop').focus(); 来获取焦点 ...
- python 基础知识1
一.编译型与解释性区别: 编译型:一次性将全部的代码编译成二进制文件.(如:C.C++) 优点:运行效率高 缺点:开发速度慢,不能跨平台. 解释型:当程序运行时,从上至下一行一行的解释成二进制.(如p ...
- python --error整理(不定时更新)
1.TabError: inconsistent use of tabs and spaces in indentation Python 中需要用tab 键来空格 2.SyntaxError: in ...
- 工作总结1-----String.format的使用
以前在开发项目中,输入信息常使用的方法:"XXXXXXX"+a+"XXXXXXXXXXX"+b;,这种方式不仅不美观而且不易维护! String中的format ...