element-ui上传多个文件时会发送多个请求
1. element-ui的默认
默认是异步多次请求上传单个文件
如果业务就是单纯的上传文件，那么这个样子是没有问题的
前端代码参考
https://element-plus.gitee.io/#/zh-CN/component/upload
后端接口
@RequestMapping("upload")
@ResponseBody
public CommonVO fileUpload(@RequestParam("file") MultipartFile multipartFile) {
2. 业务不同
但如果你的业务是上传文件的同时插入数据库内容的话，那么就会有问题
比如以下代码
@RequestMapping("upload")
@ResponseBody
public CommonVO fileUpload(@RequestParam("file") MultipartFile multipartFile, String trainName, String trainContent) {
// 内部逻辑为保存multipartFile文件，并数据库保存trainName,trainContent
return staffTrainService.saveTrainAndUpload(multipartFile,trainName,trainContent);
}
此时由于发了两次请求，导致同样的数据被保存多次
如果要解决这种情况，还需后端进行同步，然后去判断内容有没有被保存过（这也不好进行判断）
所以最好的情况就是前端只发送一次请求
3. 最终解决方案代码
1. 前端
1. 页面
前端最重要的就是el-upload中的:http-request，这个是让我们自定义上传方法
当然还有取消自动上传:auto-upload="false"
<html>
<head></head>
<body>
<el-upload class="upload-demo" ref="upload" action="/manager/staffTrain/upload" :on-preview="handlePreview" :on-change="handleChange" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :data="dataModel" :on-success="handleSuccess" :http-request="uploadFile">
<template #trigger="">
<el-button size="small" type="primary">
选取文件
</el-button>
</template>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" v-show="false">
发 布
</el-button>
</el-upload>
</body>
</html>
2. 数据
data() {
return {
// 这是上传文件的同时携带的数据
dataModel: {
trainName: '',
trainContent: '',
},
// 文件上传
fileData: '', // 文件上传数据（多文件合一）
fileList: [], // upload多文件数组
}
},
3. 方法
methods: {
// 覆盖上传事件，选择文件之后触发的事件
uploadFile(file) {
this.fileData.append('files', file.file); // append增加数据
},
// 点击上传后触发的事件
submitUpload() {
if (this.dataModel.trainName === '') {
this.message({
message: '请输入培训名称',
type: 'warning'
})
} else {
const isLt100M = this.fileList.every(file => file.size / 1024 / 1024 < 100);
if (!isLt100M) {
this.$message.error('请检查，上传文件大小不能超过100MB!');
} else {
this.fileData = new FormData(); // new formData对象
this.$refs.upload.submit(); // 提交调用uploadFile函数
this.fileData.append('trainName', this.dataModel.trainName); // 添加培训名称
this.fileData.append('trainContent', this.dataModel.trainContent); // 添加培训内容
this.postRequest("/manager/staffTrain/upload", this.fileData).then((resp) => {
if (resp.success) {
this.fileList = [];
this.addDialogVisible = false;
//清空表单
this.$refs['addForm'].resetFields();
this.getTableData(this.pageNo, this.pageSize);
}
});
}
}
},
//监控上传文件列表
handleChange(file, fileList) {
let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
if (existFile) {
this.message.error('当前文件已经存在!');
fileList.pop();
}
this.fileList = fileList;
},
},
2. 后端
这时候就可以直接接受一整个multipartFiles数组了
@RequestMapping("upload")
@ResponseBody
public CommonVO fileUpload(@RequestParam("files") MultipartFile[] multipartFiles, String trainName, String trainContent) {
return staffTrainService.saveTrainAndUpload(multipartFiles,trainName,trainContent);
}
element-ui上传多个文件时会发送多个请求的更多相关文章
- element ui 上传文件，读取内容乱码解决
element ui 上传文件,读取内容乱码解决: 加第二个参数 reader.readAsText(file.raw,'gb2312'); <el-upload class="upl ...
- Element ui 上传文件组件（单文件上传） 点击提交 没反应
element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...
- element UI 上传文件成功后 - 清空文件
request({ url: '/jiekou', method: 'post', data }).then(res => { this.$message({ type: 'success', ...
- element upload上传前对文件专门bs64上传
<!-- 文件上传 --> <template> <section class="file-upload"> <p class=" ...
- vue element ui 上传 请求接口
在页面上 http-request: 覆盖默认的上传行为,可以自定义上传的实现 <el-upload class="avatar-uploader" action=&qu ...
- el-upload控件一次接口请求上传多个文件
el-upload组件默认情况下上传多少个文件就会请求多少次上传接口,如何一次上传多个文件而不必多次请求上传接口呢?直接看代码 html <el-upload :action="act ...
- selenium -文件上传的实现 -对于含有input element的上传
使用selenium做自动化时,我们经常会遇到的一个让人头疼的问题就是文件上传. 问题的难点在于selenium无法识别并操作Windows窗口,若我们可以绕过弹出框直接把文件信息上传给选择按钮,难点 ...
- SpringBoot 整合文件上传 elment Ui 上传组件
SpringBoot 整合文件上传 elment Ui 上传组件 本文章记录 自己学习使用 侵权必删! 前端代码 博主最近在学 elment Ui 所以 前端使用 elmentUi 的 upload ...
- Drupal8重命名上传的中文名文件
完整的模块代码文件在Coding.net上,想直接使用的请前往下载:https://coding.net/u/yamus/p/chinese_rename/git/tree/master 最近吧Dru ...
随机推荐
- C# 中await前后执行线程的问题
悬赏园豆:20 [已解决问题] 浏览: 1763次 解决于 2018-08-15 22:43 今天有点疑惑就写了个测试的代码,发现控制台和Winform中不一样 比如: 控制台: ...Main( ...
- oracle中常用函数
1.oracle中 trunc 是截取的函数,用在日期类型上,就是截取到的日或时间. select trunc(sysdate) from dual 默认是截取系统日期到日,得到 2012-12- ...
- Helm on K8S
前言 容器的出现,标志着云原生的到来,Docker 基于 Linux 隔离.虚拟化等能力封装了应用:Kubernetes 的出现,建立了云原生时代的技术基础设施,它基于对容器的编排封装了集群:Kube ...
- 学习小计: Kaggle Learn Time Series Modeling
ARIMA模型,参数含义参考:https://www.cnblogs.com/bradleon/p/6827109.html from statsmodels.tsa.arima_model impo ...
- 老司机带你体验SYS库多种新玩法
导读 如何更加愉快地利用sys库做一些监控? 快来,跟上老司机,体验sys库的多种新玩法~ MySQL5.7的新特性中,非常突出的特性之一就是sys库,不仅可以通过sys库完成MySQL信息的收集,还 ...
- Qt5创建模态和非模态对话框
1.模态对话框创建: 第一种方法: QDialog dialog(this); dialog.exec(); this为该对话框的父窗口. 第二种方法: QDialog *dialog = new Q ...
- Python中的私有属性私有方法、类属性类方法以及单例设计模式
私有属性是对象不希望公开的属性,私有方法是对象不希望公开的方法.在定义私有属性和私有方法时,在属性或者方法前,加上__(两个下划线) 公有方法可以通过对象名直接调用,私有方法不能通过对象名直接调用,只 ...
- 微信小游戏 Three.js UI 2D text 简单方案
在微信小游戏中使用 THREE.js 引擎,没有合适的 UI 库可用,只能自己动手.图片啥的都还好,text 不好弄.text 要计算 width 和 height,不然事件响应范围不对. funct ...
- [考试总结]noip模拟44
这个真的是一个 \(nb\) 题. 考试快要结束的时候,在机房中只能听到此起彼伏的撕吼. 啊---------- 然后人们预测这自己的得分. \(\color{red}{\huge{0}}\) \(\ ...
- python库--pandas--MultiIndex
*表示后面会重复用到此参数 创建层次化索引 pd.MultiIndex 构造器 MI levels 每个级别不重复的标签 labels 每个级别的整数指定每个位置 *sortorder=None ...