elementUI一次请求上传多个文件
elementui
js
//文件上传
httpRequest(file) {
console.log(file);
},
submitUpload(file) {
this.$refs.upload.submit();
let param = new FormData();
this.fileList.forEach(file => {
param.append("files", file.raw); //此处一定是append file.raw 上传文件只需维护fileList file.raw.name要加上
param.append("fileNames", file.name);
});
//后台接口
addfile(param)
.then(res => {
if (res.code == ) {
this.experfrom.healthOffice.attachments = res.data;
console.log(this.experfrom.healthOffice.attachments);
this.$message({
message: "上传成功!",
type: "success"
});
} else {
this.$message.error(res.message);
}
})
.catch(err => {
console.log(err);
});
},
onChange(file, fileList) {
this.fileList = fileList;
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 个文件,本次选择了 ${
files.length
} 个文件,共选择了 ${files.length + fileList.length} 个文件`
);
},
使用http-request覆盖默认的上传行为,可以自定义上传的实现 但是上传接口不要设置在里面 ,如果设置在里面会导致多个文件分开传到后台。 将上传接口放在submitUpload中,就可以实现上传多个文件调用一次接口
elementUI一次请求上传多个文件的更多相关文章
- el-upload控件一次接口请求上传多个文件
el-upload组件默认情况下上传多少个文件就会请求多少次上传接口,如何一次上传多个文件而不必多次请求上传接口呢?直接看代码 html <el-upload :action="act ...
- 利用HttpURLConnection发送post请求上传多个文件
本文要用java.net.HttpURLConnection来实现多个文件上传 1. 研究 form 表单到底封装了什么样的信息发送到servlet. 假如我参数写的内容是hello word,然后二 ...
- element-ui上传组件,通过自定义请求上传文件
记录使用element-ui上传组件,通过自定义请求上传文件需要注意的地方. <el-upload ref="uploadMutiple" :auto-upload=&quo ...
- ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件,并在文件上传后清空文件
前言: 从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了 ...
- SpringMVC实现PUT请求上传文件
在JQuery中,我们可以进行REST ful中delete和put的请求,但是在java EE标准中,默认只有在POST请求的时候,servlet 才会通过getparameter()方法取得请求体 ...
- maven工程 java 实现文件上传 SSM ajax异步请求上传
java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...
- 如何用elementui去实现图片上传和表单提交,用axios的post方法
下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容 <!--这个组件主要用来研究upload这个elementui的上传插件组件--> & ...
- upload三种上传方式(上)---Servlet---post---commons-fileupload.1.2.1.jar方式请求上传文件
上传前进行的配置选项: 1.在下方的Servers中,右键你的tomcat--open,选中下面两个配置. 第一个:Serve modules without publishing 作用:tomcat ...
- Postman Post请求上传文件
Postman Post请求上传文件一.选择post请求方式,输入请求地址 二.填写Headers Key:Content-Type :Value:multipart/form-data 如下图 三. ...
随机推荐
- 201871010107-公海瑜《面向对象程序设计(Java)》第四周学习总结
201871010107-公海瑜<面向对象程序设计(Java)>第四周学习总结 项目 ...
- 201871010110 - 李华 《面向对象程序设计(java)》第二周学习总结
第一部分:理论知识学习部分 一.简单的Java程序应运程序 1.标识符0标识符由字母.下划线.美元符号和数字组成,且第一个符号不能为数字. 标识符可用作:类名.对象名.变量名.方法名.数组名.文件 ...
- 数据库备份 DBS(Database Backup),知识点
资料 网址 什么是DBS https://help.aliyun.com/document_detail/59133.html?spm=5176.13685554.103.6.3fa463f9CDwW ...
- ubuntu下vi/vim 的基本用法
https://blog.csdn.net/weixin_37657720/article/details/80645991 :q! 不保存强制推出. :wq 保存并退出.
- CentOS7 安装 vsftpd 服务
CentOS7 安装 vsftpd 服务 0.FTP简介 FTP服务是一个跨平台的文件共享解决方案 0.1.FTP两种模式的区分:服务端的主被动模式 1)ftp一般分为两种模式,PORTFTP和PAS ...
- python基础之五:dict 字典
1.数据类型的划分:可变数据类型.不可变数据类型 不可变的有:元组(tuple).字符(str).整型(int).布尔型(bool) 它们都可以哈希 可变的:列表(list).set.字典(dict) ...
- Linux操作中应该注意的问题
1.覆盖问题 (1)cp覆盖 (2)scp覆盖 (3)重定向 “>” 覆盖 (4)tar覆盖 2.磁盘问题 (1)GPT格式的分区会覆盖磁盘上原有的分区 (2)在/etc/fstab中写入完成后 ...
- 5-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(配置MQTT的SSL证书,验证安全通信)
4-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(为域名申请SSl证书) 前面的准备工作终于完了 复制这两个证书 放到云端MQTT的这个位置,其实放哪里都可以 ...
- [无效]网络流之Dinic算法
// 此博文为迁移而来,写于2015年2月6日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vrg4.html UPDA ...
- hive基础知识四
1. hive表的数据压缩 1.1 数据的压缩说明 压缩模式评价 可使用以下三种标准对压缩方式进行评价 1.压缩比:压缩比越高,压缩后文件越小,所以压缩比越高越好 2.压缩时间:越快越好 3.已经压缩 ...