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. beeline: 新版连接Hive server的工具

    HiveServer2 支持一个新的命令行Shell,称为Beeline,它是基于SQLLine CLI的JDBC客户端.它是从 Hive 0.11版本引入的,是Hive新的命令行客户端工具.Hive ...

  2. C# 串口开发

    在单片机项目开发中,上位机也是一个很重要的部分,主要用于数据显示(波形.温度等).用户控制(LED,继电器等),下位机(单片机)与 上位机之间要进行数据通信的两种方式都是基于串口的: USB转串口 - ...

  3. C# 计算文件的MD5

    MD5的作用详见:https://baike.baidu.com/item/MD5/212708?fr=aladdin public static string GetFileMD5(string f ...

  4. 超详细教程2021新版oracle官网下载Windows JAVA-jdk11并安装配置（其他版本流程相同）

    异想之旅:本人博客完全手敲,绝对非搬运,全网不可能有重复:本人无团队,仅为技术爱好者进行分享,所有内容不牵扯广告.本人所有文章发布平台为CSDN.博客园.简书和开源中国,后期可能会有个人博客,除此之外 ...

  5. Redis（二）：基本数据类型

    基础 # redis默认有16个数据库,数组下标从0开始,默认使用0号库 # 当我们启动服务器并连接客户端之后: set <key> <value> # 向数据库中添加数据用于 ...

  6. springboot系列总结(二)---springboot的常用注解

    上一篇文章我们简单讲了一下@SpringBootApplication这个注解,申明让spring boot自动给程序进行必要的配置,他是一个组合注解,包含了@ComponentScan.@Confi ...

  7. Qt之文件操作

    虽然文件操作是一项很常用的功能,但是总记不住,今天就干脆记了一下笔记,以后好查阅. 在Qt中,主要使用的是QFile类进行文件操作,因此要包括#include <QFile>头文件.下面就 ...

  8. zap高性能日志

    摘要 日志在整个工程实践中的重要性不言而喻,在选择日志组件的时候也有多方面的考量.详细.正确和及时的反馈是必不可少的,但是整个性能表现是否也是必要考虑的点呢?在长期的实践中发现有的日志组件对于计算资源 ...

  9. blender skin modifier 太好玩了

    https://docs.blender.org/manual/en/latest/modeling/modifiers/generate/skin.html 只需要像画火柴人一样把点连起来,skin ...

  10. Java基础之SPI机制

    SPI 机制,全称为 Service Provider Interface,是一种服务发现机制.它通过在 ClassPath 路径下的 META-INF/services 文件夹查找文件,自动加载文件 ...