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. C# Fakes

    我们为了测试程序的运行逻辑,需要写单元测试来验证程序的逻辑.有的时候我们的逻辑需要依赖于外界的事物(需要一个文件,eg:数据库),我们不可能在运行单元测试的计算机都创建一个数据库,所以这个时候我们就需 ...

  2. await 关键字 后面跟Task 和Task <T>

    1.Task的优势 ThreadPool相比Thread来说具备了很多优势,但是ThreadPool却又存在一些使用上的不方便.比如: ◆ ThreadPool不支持线程的取消.完成.失败通知等交互性 ...

  3. JDK1.5新特性之注解

    时间:2017-1-2 20:14 --注解的概述    注释是给人看的,而注解是给程序(框架)看的.    在Servlet3.0中可以使用注解来替代配置文件,开发者就不用再写配置文件了,而是写注解 ...

  4. java一些工具类

    import java.math.BigDecimal; import java.math.RoundingMode; import java.util.ArrayList; import java. ...

  5. UOS LoongArch 上成功安装.NET Core 3.1

    龙芯.NET团队正式发布了.NET Core 3.1 For LoongArch, 具体参见龙芯开源网站 http://www.loongnix.cn/index.php/Dotnet . 进入安装包 ...

  6. idea导出jar包及坑

    导出基本步骤 1.打开项目结构,在artifact新建一个jar 2.然后填写主类和依赖 3.这里的坑: 4.查看 5.点击编译输出 6.得到jar包

  7. Linux下ansible使用

    一.ansible的功能和意义 1.功能 ansible批量功能 ----------------------> 并行 01. 可以实现批量系统操作配置 02. 可以实现批量软件服务部署 03. ...

  8. 注解@Component方式代替xml装配bean

    一.@Component 用注解来装配bean 1. 2.对类使用注解,装配bean: 3.类中,注入其他对象: 二.bean.xml中配置@Componet方式装配bean 1.开启注解装配bean ...

  9. PULPino datasheet中文翻译并给了部分论文注释（前四章：Overview、Memory Map、CPU Core、Advanced Debug Unit）

    参考: (1).PULPino datasheet:https://github.com/pulp-platform/pulpino/blob/master/doc/datasheet/datashe ...

  10. weblogic之XXE利用与分析

    weblogic之XXE利用与分析 本篇文章漏洞环境使用p神的CVE-2018-2628 本机IP:192.168.202.1 被攻击主机IP:192.168.202.129 一. xxer工具 1. ...