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. WPF以鼠标当前位置进行缩放

    <Window x:Class="ImageViewer.MainWindow" xmlns="http://schemas.microsoft.com/winfx ...

  2. TortoiseGit冲突和解决冲突

    产生冲突原因 产生:多个开发者同时使用或者操作git中的同一个文件,最后在依次提交commit和推送push的时候,第一个操作的是可以正常提交的,而之后的开发者想要执行pull(拉)和pull(推)操 ...

  3. python创建字典多种方式

    1.创建空字典 >>> dic = {} >>> type(dic) <type 'dict'> 2.直接赋值创建 >>> dic = ...

  4. asp获取当前页面url

    <%Function GetLocationURL() Dim Url Dim ServerPort,ServerName,ScriptName,QueryString ServerName = ...

  5. Linux 单实例oracle安装步骤

    一.查看逻辑盘大小,执行 lsblk 二.查看硬盘及分区信息 ,执行 fdisk -l 三.将物理硬盘分区初始化为物理卷,以便LVM使用 ,创建pv pvcreate /dev/sdb 四.查看物理卷 ...

  6. Qt5之正则表达式

    字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个 向后引用.或一个八进制转义符.例如,'n' 匹配字符 "n".'\n' 匹配一个换行符.序列 '\\' 匹配 ...

  7. proto buffer

    protobuf是一种高效的数据格式,平台无关.语言无关.可扩展,可用于 RPC 系统和持续数据存储系统. protobuf介绍 Protobuf是Protocol Buffer的简称,它是Googl ...

  8. awk 命令-随笔

    awk语法: awk [option] 'pattern{action}' file ... awk [参数] '条件{动作}' 文件 ... 解析: 命令: awk 参数: -F "&qu ...

  9. 【算法】使用Golang实现加权负载均衡算法

    背景描述 如下图所示,负载均衡做为反向代理,将请求方的请求转发至后端的服务节点,实现服务的请求. 在nginx中可以通过upstream配置server时,设置weight表示对应server的权重. ...

  10. shell传参和变量赋值

    1.变量赋值方式 (1)方式1--直接赋值(=) (2)方式2--read交互式赋值 (3)方式3--脚本传参赋值 2.read read -p "请输入你的名字和年龄:" nam ...