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# wpf中DataGrid 支持汇总行

    最近有一个需求,需要汇总金额,份额等字段.我们使用的是原生的WPF控件,自己开发了一套Template.而没有使用比较成熟的第三方控件.所以这个功能得自己开发.并且要做成控件层次的功能. 当然也可以这 ...

  2. C++多态中虚函数表合并与继承问题

    多态: C++的多态是通过一张虚函数表(Virtual Table)来实现的,简称为 V-Table.在这个表中,主要是一个类的虚函数的地址表,这张表解决了继承.覆写的问题,保证其真实反应实际的函数. ...

  3. AOP的底层实现-CGLIB动态代理和JDK动态代理

    AOP是目前Spring框架中的核心之一,在应用中具有非常重要的作用,也是Spring其他组件的基础.它是一种面向切面编程的思想.关于AOP的基础知识,相信多数童鞋都已经了如指掌,我们就略过这部分,来 ...

  4. 我对数据库事务的理解（MYSQL中）

    -- 设置数据库事务为手动的提交SET @@AUTOCOMMIT = 0;-- 查看是否被修改SELECT @@autocommit;-- 查看当前的编码格式SELECT @@character_se ...

  5. 笔记本Linux系统，修改合盖不待机

    最近买了一个新笔记本,所以就把老的笔记本当作服务器使用了.但是一盒笔记本的盖子就会待机,真的是麻烦.操作如下可以解决问题: 1.编辑 logind.conf 文件,命令如下 vi /etc/syste ...

  6. clickhouse物化视图

    今天来简单介绍一下clickhouse的物化视图 物化视图支持表引擎,数据保存形式由它的表引擎决定,创建物化视图的完整语法如下: create materialized view mv_log eng ...

  7. Linux云服务部署Spring boot项目

    Linux云服务部署Spring boot项目 背景: 之前经过两个周的时间,做了一个简单的博客网站,网址:点击进入,在本地可以正常使用以后,想着部署到服务器上,给大家伙看个乐呵,于是有了这篇部署文章 ...

  8. 微信公众号授权回调用户信息，获取openid

    1.--------------------用户授权登录并获取code 授权登录方式有两个,一种为静默授权登录(scope=snsapi_base),一种为非静默授权登录(scope=snsapi_u ...

  9. 手机端rem简单配置相关

    手机端rem简单配置相关 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 ...

  10. Spring BeanDefinition

    定义 /** * A BeanDefinition describes a bean instance, which has property values, * constructor argume ...