Vue + SpringBoot：el-upload组件单文件、多文件上传实战解析

文章目录

单文件上传
- 后端
- 前端
多文件上传
- 后端
- 前端

单文件上传

后端

@PostMapping("/uploadDxfFile")
public R uploadDxfFile(@RequestParam(value = "file", required = true) MultipartFile multipartFile) throws Exception {// 文件校验工作if (multipartFile.isEmpty() || multipartFile.getSize() > 52428800) {R.fail(BaseErrorCode.CLIENT_ERROR.code(), "上传文件不能为空,且不能大于50MB");}// 获取文件名String originalFilename = multipartFile.getOriginalFilename();if (!(originalFilename.endsWith(".dxf"))) {return R.fail(BaseErrorCode.CLIENT_ERROR.code(), "只能导入dxf文件");}// 获取文件输入流InputStream inputStream = multipartFile.getInputStream();return R.ok(resultMap);
}

前端

在这里插入图片描述
【组件】

<el-upload class="upload-demo" :action="uploadDxfAction" :data="uploadPostData":on-preview="handlePreview":on-remove="handleRemove" :before-remove="beforeRemove" :on-success="handleSuccess":headers="headers" :limit="1" :on-exceed="handleExceed" :file-list="fileList"style=" width: 100%;"><el-button size="mini" type="primary">上传dxf文件</el-button><div slot="tip" class="el-upload__tip" style="color: red;">只能上传.dxf文件，且不超过50MB</div>
</el-upload>

:action="uploadDxfAction"：定义文件要上传到的后台接口地址
:limit="1"：限制只能上传一个文件
:on-success="handleSuccess"：定义文件上传成功时执行的方法
:headers="headers"：如果后台做了权限验证，需要在这里定义文件上传时的请求头’

【变量定义】

 data() {return {// tokentoken: '',// 请求头headers: {},passengerFlowImportDialogVisible: false,// 文件上传地址（后端接受文件的地址）uploadDxfAction: process.env.VUE_APP_BASE_API + "/packing/item/uploadDxfFile",// 文件列表fileList: [],// 导入文件的同时向后台提交数据uploadPostData: {},/// 批量上传物品uploadItemList: [],// 设置所导入零件参数的时候，点击到的行selectRow: {},};},

【方法定义】

handleSuccess(res) {console.log("文件上传成功");console.log("res:" + JSON.stringify(res.data.code));// 这里可以定义一些文件上传成功之后的操作，例如成功提示、文件信息解析……
},handleRemove(file, fileList) {console.log(file, fileList);
},
handlePreview(file) {console.log(file);
},
handleExceed(files, fileList) {this.$message.warning(`只能选择 1 个文件，如果想要更换文件，请删除原有文件`);
},
beforeRemove(file, fileList) {return this.$confirm(`确定移除 ${file.name}？`);
},
// 清除已经上传的文件
clearFileList() {this.fileList = [];
},
handleChange(file, fileList) {this.fileList = fileList;
},

多文件上传

后端

/*** 导入一组dxf文件并完成解析** @param multipartFiles 文件列表* @param paramMap       额外参数映射* @return 返回结果* @throws Exception 异常*/
@PreAuthorize("@ss.hasPermi('packing:item:uploadDxfFiles')")
@Log(title = "上传dxf文件组", businessType = BusinessType.IMPORT)
@PostMapping("/uploadBatchDxfFile")
public R uploadBatchDxfFile(@RequestParam(value = "files", required = true) List<MultipartFile> multipartFiles, @RequestParam(required = false) Map paramMap) throws Exception {if (multipartFiles.isEmpty()) {return R.fail(BaseErrorCode.CLIENT_ERROR.code(), "上传文件组不能为空");}// 解析出每个文件List<Item> items = multipartFiles.stream().filter(file -> !file.isEmpty() && file.getSize() <= 52428800 && file.getOriginalFilename().endsWith(".dxf")).map(file -> {try {// 处理文件} catch (Exception e) {throw new RuntimeException("解析文件出错：" + file.getOriginalFilename(), e);}}).collect(Collectors.toList());if (items.isEmpty()) {return R.fail(BaseErrorCode.CLIENT_ERROR.code(), "没有有效的dxf文件被上传");}HashMap<String, Object> resultMap = new HashMap<>();resultMap.put("items", items);return R.ok(resultMap);
}

前端

在这里插入图片描述

<el-upload ref="batchUpload" class="upload-demo" :action="uploadBatchDxfAction" :data="uploadPostData":on-preview="handlePreview":on-remove="handleRemove" :before-remove="beforeRemove" :on-success="handleBatchSuccess":headers="headers" multiple :on-exceed="handleExceed" :file-list="fileList":on-change="handleChange":auto-upload="false"style="width: 100%;"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="submitBatchUpload">上传解析</el-button><div slot="tip" class="el-upload__tip" style="color: red;">只能上传.dxf文件，每个文件不超过50MB</div>
</el-upload>

首先需要关闭自动上传:auto-upload="false"，不然所选择的文件会被一个一个上传，我们希望同时将这些文件上传到服务器进行处理。
变量定义、方法定义和上面类似，这里只展示不一样的。在选取完文件之后，并不会自动上传到服务器，需要点击按钮手动上传，如果直接调用el-upload的提交方法，还是会一个一个文件的上传，因此我们需要自己写一个请求方法，我的请求方法如下：

import axios from 'axios'
// 批量上传文件
export function uploadBatchDxfFile(fileList, token) {const formData = new FormData();// 遍历文件列表，将每个文件添加到formData中fileList.forEach((file, index) => {// 你可以选择使用一个通用的键名（如'files'），并让后端处理多个同名的键值// 或者为每个文件使用唯一的键名，这取决于你的后端需求formData.append(`files`, file.raw, file.name); // 这里的`files`是后端期望的字段名});return axios.post(process.env.VUE_APP_BASE_API + '/packing/item/uploadBatchDxfFile', formData, {headers: {'Content-Type': 'multipart/form-data',Authorization: `Bearer ${token}`}}).then(response => {// 处理成功的响应return response.data;}).catch(error => {// 处理错误情况throw error;});
}

注意需要给vue项目引入axios，才能使用上面的请求方法。最终在页面中给按钮触发事件绑定下面的方法即可

/*** 将选中的文件批量上传*/
submitBatchUpload() {if (this.fileList.length === 0) {this.$modal.msgWarning("请先选择文件再上传解析");return;}uploadBatchDxfFile(this.fileList, this.token).then(res => {})
},