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. 在VS工程中，添加c/c++工程中外部头文件(.h)，lib库，dll库的基本步骤

    选择工程,右键-工程属性 其中: VC++目录 -->包含目录,对所有的项目及未来新建的项目都有效 c/c++-->常规-->附加包含目录,仅对当前项目有效 绝对路径设置方法: 在V ...

  2. 01.SpringMVC之概述

    springMVC架构 SpringMVC是Spring框架的一个模块,Spring和SpringMVC无需通过中间整合层进行整合.SpringMVC是基于MVC架构的WEB框架.SpringMVC框 ...

  3. MySql 文件导入导出

    1.将表输出到文件 select * FROM zhilianzhaopin4 INTO OUTFILE 'G:/test.csv'      --------输出位置 fields terminat ...

  4. restore db fail

    System.Data.SqlClient.SqlError: The operating system returned the error '5(Access is denied.)' while ...

  5. Sparksql 日期加减函数

    1.日期加减spark sql 日期加减,date_sub,date_addval dateDF=spark.range(10) .withColumn("today",curre ...

  6. Android开发，缺少权限导致无法修改原文件，获取所有文件访问权限的方法

    在Android 11开发中,app会遇到使用绝对路径无法打开某文件的情况(文件存在根目录下,获取到的路径为:/storage/emulated/0/XXX.txt),而使用相对路径打开文件后(获取到 ...

  7. C# - 音乐小闹钟_BetaV1.0

    时间:2017-11-20 作者:byzqy 介绍: 前段时间看到别人利用Timer控件实现了检查电脑本地时间,然后对时间进行比较,最终实现闹钟功能.感觉有点意思,于是自己也做了一个小闹钟! 先看一下 ...

  8. 10个最酷的Linux单行命令

    下面是来自  Commandlinefu 网站由用户投票决出的 10 个最酷的 Linux 单行命令,希望对你有用. sudo !! 以 root 帐户执行上一条命令. python -m Simpl ...

  9. 在CentOs7源码安装mysql-5.6.35单实例数据库

    首先安装依赖包,避免在安装过程中出现问题 [root@bogon liuzhen]# yum -y install gcc gcc-c++[root@bogon liuzhen]# yum -y in ...

  10. Linux centos7 scp命令

    1. 命令简介 scp(secure copy) 是 linux 系统下基于 ssh 登陆进行安全的远程文件拷贝命令,可以在两台 Linux 主机进行复制操作 # 语法 scp [-1246BCpqr ...