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上传多个文件时会发送多个请求的更多相关文章

  1. element ui 上传文件,读取内容乱码解决

    element ui 上传文件,读取内容乱码解决: 加第二个参数 reader.readAsText(file.raw,'gb2312'); <el-upload class="upl ...

  2. Element ui 上传文件组件(单文件上传) 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  3. element UI 上传文件成功后 - 清空文件

    request({ url: '/jiekou', method: 'post', data }).then(res => { this.$message({ type: 'success', ...

  4. element upload上传前对文件专门bs64上传

    <!-- 文件上传 --> <template> <section class="file-upload"> <p class=" ...

  5. vue element ui 上传 请求接口

    在页面上 http-request: 覆盖默认的上传行为,可以自定义上传的实现 <el-upload  class="avatar-uploader"  action=&qu ...

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

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

  7. selenium -文件上传的实现 -对于含有input element的上传

    使用selenium做自动化时,我们经常会遇到的一个让人头疼的问题就是文件上传. 问题的难点在于selenium无法识别并操作Windows窗口,若我们可以绕过弹出框直接把文件信息上传给选择按钮,难点 ...

  8. SpringBoot 整合文件上传 elment Ui 上传组件

    SpringBoot 整合文件上传 elment Ui 上传组件 本文章记录 自己学习使用 侵权必删! 前端代码 博主最近在学 elment Ui 所以 前端使用 elmentUi 的 upload ...

  9. Drupal8重命名上传的中文名文件

    完整的模块代码文件在Coding.net上,想直接使用的请前往下载:https://coding.net/u/yamus/p/chinese_rename/git/tree/master 最近吧Dru ...

随机推荐

  1. 深入浅出Mybatis系列(九)---缓存

    MyBatis系统中默认定义了两级缓存:一级缓存和二级缓存. 1.默认情况下,只有一级缓存(SqlSession级别的缓存,也称为本地缓存)开启. 2.二级缓存需要手动开启和配置,他是基于namesp ...

  2. jquery validate 如何校验多个相同name

    在表单页中有如下代码 <form> <input name="zhai"/><!-- 三个相同name的input --> <input ...

  3. SpringCloud 商品架构例子(一)

    架构演进和分布式系统基础知识 1.传统架构演进到分布式架构 简介:讲解单机应用和分布式应用架构演进基础知识 高可用 LVS+keepalive 单体应用: 集群: 微服务架构: 1.单体应用: 开发速 ...

  4. Spring之属性注入

    时间:2017-1-31 23:38 --Bean的属性注入方式有三种注入方式:    1)接口注入:        定义一个接口,定义setName(String name)方法,定义一个类,实现该 ...

  5. 详解 Interpolator动画插值器

    Interpolator 被用来修饰动画效果,定义动画的变化率.在Android源码中对应的接口类为TimeInterpolator,通过输入均匀变化的0~1之间的值,可以得到匀速.正加速.负加速.无 ...

  6. spring boot应用常用配置

    pom.xml <!--自动打包--> <plugin> <groupId>org.springframework.boot</groupId> < ...

  7. BUU-CTF[CISCN2019 华东南赛区]Web11

    BUU-CTF[CISCN2019 华东南赛区]Web11 页面最下端有提示Build with Smarty ! 确定页面使用的是Smarty模板引擎.输入{$smarty.version}就可以看 ...

  8. os用法总结:python中必须掌握的内置模块os,实现与计算机操作系统的常规交互!

    os模块说明 ''' os 模块 Os库是python标准库,包含几百个函数 常用路径操作.进程管理.环境参数等几类 路径操作:os.path子库,处理文件路径及信息 进程管理:启动系统中其他程序 环 ...

  9. zigzag走线原理及应用

    电路板上弯弯扭扭的走线有什么用 往期文章: 一文读懂高速互联的阻抗及反射(上) 一文读懂高速互联的阻抗及反射(中) 前面几篇文章有部分读者反馈太深奥,不好懂,要求来一点轻松易懂的.这不,它来了!本期文 ...

  10. Mac超好用的软件合集和系统设置

    软件篇 这些软件好像只有动态壁纸是收费的. 推荐的都是特别小巧,更加专注特定功能,没那么多花里胡哨.当然你们有什么更好用的也可以推荐. 简单,好用才是我最喜欢的. Bob Github开源,Bob 是 ...