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 => {})
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/41884.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web Worker学习笔记 | 浏览器切换标签,定时器失效的解决办法

文章目录 web Workerweb Worker介绍 - 多线程解决方案浏览器多进程架构 web workers 的使用关闭worker引用其他js文件 浏览器切换标签&#xff0c;定时器失效的解决办法窗口可见性 API解决定时器失效的方案 web Worker web Worker介绍 - 多线程解决方案 Web Workers 是Html5提…

服务器数据恢复—DS5300存储raid5阵列数据恢复案例

服务器存储数据恢复环境&#xff1a; 某单位一台某品牌DS5300存储&#xff0c;1个机头4个扩展柜&#xff0c;50块硬盘组建2组RAID5磁盘阵列&#xff08;一组raid5阵列有27块成员盘&#xff0c;存放Oracle数据库文件&#xff1b;另外一组raid5阵列有23块成员盘&#xff09;。存储…

大带宽独立服务器的购买和配置流程是怎样的?

在当前互联网时代&#xff0c;大带宽独立服务器越来越受到企业和个人用户的青睐。其稳定性和高速的数据传输速率可以为用户提供更好的互联网体验。下面我们将详细介绍如何购买和配置大带宽独立服务器。 第一步&#xff1a;选择合适的服务器提供商 在选择服务器提供商时&#…

CF1982D Beauty of the mountains

【题意】 Nikita 喜欢爬山。当地的山可以看作一个由 ( n m ) (n \times m) (nm) 个格子组成的 n m n \times m nm 的矩形&#xff0c;每一个格子都有一个初始非负高度 a i , j a_{i,j} ai,j​。 格子有两种类型&#xff1a; 有雪无雪 Nikita 有一种超能力&#xff1a;…

数组相关内容

一、数组 就是一个集合&#xff0c;里面存放了相同类型的数据元素 特点&#xff1a; 1.数组中的每个数据元素都是相同的数据类型 2.数组是由连续内存位置组成的 二、一维数组 定义方式 1.数据类型 数组名[数组长度]&#xff1b; 2.数据类型 数组名[数组长度]{值1&#xff0…

Jacoco的覆盖率原理

收集覆盖率信息的方法 Runtime Profiling Runtime Profiling是一种在程序运行时进行的性能分析技术,它可以帮助开发者了解程序的运行情况,识别性能瓶颈和优化程序性能。由于是在程序运行时进行,runtime profiling 能够提供实时的数据,便于理解程序在实际运行条件下的行为…

周报7.1-7.7

学习内容 了解注意力机制的相关内容&#xff0c;学习注意力提示、注意力汇聚、评分函数、Bahdanau注意力、多头注意力、Transformer等内容。了解Bahdanau注意力和Transformer的模型代码实现。Qt的碳汇源继续需求整改 下周计划 学习Pytorch的代码实战&#xff0c;学习使用Ten…

HashMap中的put()方法

一. HashMap底层结构 HashMap底层是由哈希表(数组),链表,红黑树构成,哈希表存储的类型是一个节点类型,哈希表默认长度为16,它不会每个位置都用,当哈希表中的元素个数大于等于负载因子(0.75)*哈希表长度就会扩容到原来的2倍 二. 底层的一些常量 三. HashMap的put()方法 当插入一…

ONLYOFFICE最新8.1版本——桌面编辑器简单测评

前言 大家好&#xff0c;我是小雨&#xff0c;看到最近ONLYOFFICE更新了最新的版本&#xff0c;更新了一下当前版本来具体的测评一下&#xff0c;先来看看官网提供的各类更新信息&#xff0c;下面是我找到的三个主页&#xff0c;包括功能演示链接&#xff0c;官网连接以及专门…

阿里云存储

传统存储面临的挑战 现如今&#xff0c;数据与土地、劳动力、资本、技术并称为五大生产要素&#xff0c;数据成为数字经济发展的重要引擎。大数据时代&#xff0c;数据处理的需求急剧增长&#xff0c;越来越多的智能设备以及新应用如区块链、机器学习训练和AI等产生大量的数据…

复分析——第10章——Θ函数应用(E.M. Stein R. Shakarchi)

第10章 Θ函数的应用 (Applications of Theta Functions) The problem of the representation of an integer n as the sum of a given number k of integral squares is one of the most celebrated in the theory of numbers. Its history may be traced back to Diopha…

CV03_mAP计算以及COCO评价标准

COCO数据集回顾&#xff1a;CV02_超强数据集&#xff1a;MSCOCO数据集的简单介绍-CSDN博客 1.1 简介 在目标检测领域中&#xff0c;mAP&#xff08;mean Average Precision&#xff0c;平均精度均值&#xff09;是一个广泛使用的性能评估指标&#xff0c;用于衡量目标检测模型…

短信验证码实现

一、设置AccessKey 创建用户并配置使用权限&#xff0c;使我们拥有调用 aliyunAPI 的权限&#xff0c;之后会生成 AccessKeyID 和 AccessKey密码&#xff0c;后面我们会使用到。需要注意的是 AccessKeyID 和 AccessKey密码生成后我们需要将他保存起来&#xff0c;否则后期无法查…

奇迹MU 骷髅战士在哪

BOSS分布图介绍 我为大家带来各地区怪物分布图。在游戏前期&#xff0c;很多玩家可能会不知道该去哪里寻找怪物&#xff0c;也不知道哪些怪物值得打。如果选择了太强的怪物&#xff0c;弱小的玩家可能会无法抵御攻击。如果选择了低等级的boss&#xff0c;收益可能并不理想。所…

智能家居安防系统教学解决方案

前言 随着科技的不断进步和智能家居概念的深入人心&#xff0c;智能家居安防系统作为智能家居领域的重要组成部分&#xff0c;其重要性日益凸显。智能家居安防系统不仅能够提供环境和人员的监测功能&#xff0c;还能够采取措施降低或避免人员伤亡及财产损失。因此&#xff0c;…

Double 4 VR虚拟情景智能互动系统在高铁乘务管理课堂上的应用

在不断进步的科技背景下&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已广泛应用于教育领域。VR技术的运用为课堂教育提供了新的思路与方式&#xff0c;尤其在高铁乘务管理这一专业中&#xff0c;Double 4 VR虚拟情景智能互动系统更是发挥了其独特的优势。 一、VR技术带…

word文档没有保存就关闭了怎么恢复?找到正确的方法

昨天写教程的时候&#xff0c;终于完成了一个word文档&#xff0c;以为保存了就直接关了。word提醒我“是否保存”&#xff0c;我直接忽略了。动作一气呵成&#xff0c;毫不犹豫的关闭了。之后才发现我没有保存word文档。这种情况大家有遇到过吗?我们该如何在没有保存的情况下…

迎接AI新时代:GPT-5即将登场的巨大变革与应用前瞻

迎接AI新时代&#xff1a;GPT-5即将登场的巨大变革与应用前瞻 &#x1f48e;1. GPT-5 一年半后发布&#xff1a;AI新时代的来临1.1 GPT-5的飞跃&#xff1a;从高中生到博士生 &#x1f48e;2. GPT-5的潜在应用场景&#x1f48e;2.1 医疗诊断和健康管理&#x1f48e;2.2 教育领域…

Docker+Spring boot为环境变量赋值(普通变量和List变量)

DockerSpring boot为环境变量赋值&#xff08;普通变量和List变量&#xff09; Spring boot开发微服务&#xff0c;使用yml做配置文件&#xff0c;Docker方式部署。 在不同环境中&#xff0c;需要对yml中的配置进行调整&#xff0c;本文主要介绍在以docker run方式运行时&…

谷歌推广:精准定位潜在客户群体,提高广告转化率

借助谷歌推广&#xff0c;你的品牌将如火箭升空般迅速崛起。作为全球最大的搜索引擎&#xff0c;其影响力犹如站在巨人之肩&#xff0c;触及的受众规模高达数十亿人。更为重要的是&#xff0c;我们可以准确锁定那些最有可能对贵公司的产品或服务产生浓厚兴趣的群体。这并非普通…