element-ui上传多个文件时会发送多个请求

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);
        
    }
posted @ 2021-04-09 18:28  微花  阅读(2529)  评论(3)  编辑  收藏  举报

Loading