elementui
<el-upload
                      class="upload-demo"
                      action="/api-cdc/upload/attachment"
                      ref="upload"
                      :http-request="httpRequest"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :on-change="onChange"
                      :before-remove="beforeRemove"
                      multiple
                      :on-exceed="handleExceed"
                      :file-list="fileList"
                      :auto-upload="false"
                    >
                      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                      <el-button
                        style="margin-left: 10px;"
                        size="small"
                        type="success"
                        @click="submitUpload"
                      >上传到服务器</el-button>
                      <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
                    </el-upload>

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一次请求上传多个文件的更多相关文章

  1. el-upload控件一次接口请求上传多个文件

    el-upload组件默认情况下上传多少个文件就会请求多少次上传接口,如何一次上传多个文件而不必多次请求上传接口呢?直接看代码 html <el-upload :action="act ...

  2. 利用HttpURLConnection发送post请求上传多个文件

    本文要用java.net.HttpURLConnection来实现多个文件上传 1. 研究 form 表单到底封装了什么样的信息发送到servlet. 假如我参数写的内容是hello word,然后二 ...

  3. element-ui上传组件,通过自定义请求上传文件

    记录使用element-ui上传组件,通过自定义请求上传文件需要注意的地方. <el-upload ref="uploadMutiple" :auto-upload=&quo ...

  4. ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件,并在文件上传后清空文件

    前言: 从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了 ...

  5. SpringMVC实现PUT请求上传文件

    在JQuery中,我们可以进行REST ful中delete和put的请求,但是在java EE标准中,默认只有在POST请求的时候,servlet 才会通过getparameter()方法取得请求体 ...

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

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

  7. 如何用elementui去实现图片上传和表单提交,用axios的post方法

    下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容 <!--这个组件主要用来研究upload这个elementui的上传插件组件--> & ...

  8. upload三种上传方式(上)---Servlet---post---commons-fileupload.1.2.1.jar方式请求上传文件

    上传前进行的配置选项: 1.在下方的Servers中,右键你的tomcat--open,选中下面两个配置. 第一个:Serve modules without publishing 作用:tomcat ...

  9. Postman Post请求上传文件

    Postman Post请求上传文件一.选择post请求方式,输入请求地址 二.填写Headers Key:Content-Type :Value:multipart/form-data 如下图 三. ...

随机推荐

  1. 201871010126 王亚涛 《面向对象程序设计(java)》 第四周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  2. openpyxl模块

    openpyxl模块 可以对Excel表格进行操作的模块 第三方模块需要下载 pip install openpyxl 配置永久第三方源: D:\Python36\Lib\site-packages\ ...

  3. Educational Codeforces Round 78 (Rated for Div. 2) D. Segment Tree

    链接: https://codeforces.com/contest/1278/problem/D 题意: As the name of the task implies, you are asked ...

  4. 生成随机文件名JS

    export default function (length) { const data = ["0", "1", "2", " ...

  5. Pandas | 20 级联

    Pandas提供了各种工具(功能),可以轻松地将Series,DataFrame和Panel对象组合在一起. pd.concat(objs,axis=0,join='outer',join_axes= ...

  6. ESA2GJK1DH1K基础篇: 阿里云物联网平台: 测试云平台显示MQTT客户端发过来的消息

    现在这里空空如也 咱自定义的也没有数据 现在就是传上来温度数据,让这里显示温度数据 你发布的主题  /sys/a1m7er1nJbQ/Mqtt/thing/event/property/post 发布 ...

  7. P3258 [JLOI2014]松鼠的新家题解

    题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有\(n\)个房间,并且有\(n-1\)根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他居然真的住在"树& ...

  8. Salesforce 开发整理(五)代码开发最佳实践

    在Salesforce项目实施过程中,对项目代码的维护可以说占据极大的精力,无论是因为项目的迭代,还是需求的变更,甚至是项目组成员的变动,都不可避免的需要维护之前的老代码,而事实上,几乎没有任何一个项 ...

  9. [HeadFrist-HTMLCSS学习笔记]第五章认识媒体:给网页添加图像

    [HeadFrist-HTMLCSS学习笔记]第五章认识媒体:给网页添加图像 干货 JPEG.PNG.GIF有何不同 JPEG适合连续色调图像,如照片:不支持透明度:不支持动画:有损格式 PNG适合单 ...

  10. 【LeetCode】缺失的第一个正数【原地HashMap】

    给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0] 输出: 3 示例 2: 输入: [3,4,-1,1] 输出: 2 示例 3: 输入: [7,8,9,11 ...