upload 文件自动上传写法，前后端 下载流文件流

<el-uploadv-model:file-list="fileList":action="app.api+'/student/student/import'":headers="{//   'Content-Type': 'multipart/form-data;boundary=----split-boundary', 此处切记不要加，否则会造成后端报错  Required request part 'file' is not present 'token':token}"name="file"//此处默认为fileclass="upload-demo"@on-success="handleSuccess":on-error="handleAvatarSuccess":limit="3":on-progress="beforeAvatarUpload">
<!--:auto-upload="false"--><!--          :http-request="replaceRes"--><span v-if="jinDu"><el-progress style="width: 245px; height: 19px" :text-inside="true" :stroke-width="20":percentage="percentage"/></span><span v-if="isUpload" style="color: #59c2c7;cursor:pointer;"@click="uploadChangeValue">导入学生学籍信息</span><template #tip><span style="color: #ff8282; margin-left: 20px">{{ importText }}</span></template></el-upload>
<script lang="ts" setup>//此处后端穿了一个流给前端，所以需要解析一下，然后赋值给一个按钮，在点击时候才下载！！！
const handleSuccess = (response: any) => {console.log(response)if (Object.values(response.headers)[0] == 'application/vnd.ms-excel;charset=UTF-8') {const url = window.URL.createObjectURL(new Blob([response.data]));// 创建a标签，并隐藏a标签let link = document.createElement('a')link.style.display = 'none'// a标签的href属性指定下载链接link.href = url//setAttribute() 方法添加指定的属性，并为其赋指定的值// 后缀格式.csv/.xsls要和需要和后端返回格式相同，这里以.csv为例link.setAttribute('download', '文件名称.xlsx')document.body.appendChild(link)link.click()document.body.removeChild(link)}
};//此处用于实时监听进度条进度
const beforeAvatarUpload = (event: any) => {let loadProgress = Math.floor(event.percent); //这就是当前上传的进度//可以进行其他逻辑percentage.value = loadProgress;importText.value = "学籍信息导入中……";if (percentage.value == 100) {importText.value = "学籍导入成功！"}
};
</script>

    @PostMapping("import")@ApiOperation("导入")@RequiresPermissions("student:student:import")@ApiImplicitParam(name = "file", value = "文件", paramType = "query", dataType = "file")public void importExcel(@RequestParam("file") MultipartFile file, HttpServletResponse response) throws Exception {UserDetail userDetail = SecurityUser.getUser();//保存所有的表单信息、如果表达有错误、将返回给客户端if (userWithErrorListInMap == null) {userWithErrorListInMap = new HashMap<>();}//每次都清空数据userWithErrorListInMap.put(userDetail.getId(), new ArrayList<>());ZsRef<Boolean> hasError = new ZsRef<>();new ExcelServiceListener<StudentExcel, StudentEntity>(studentService, file.getInputStream()) {private List<RegionEntity> regionList;/*** 地区编码 去掉末尾的数字0, 用于判断权限*/private String userRegionCodeForPermission;private SchoolEntity schoolForPermission;@Overridepublic void invoke(StudentExcel data, AnalysisContext context) {if (regionList == null) {regionList = regionService.selectList(new HashMap<>());}if (userDetail.getRegionCode() != null) {//去掉地区编码后面的0userRegionCodeForPermission = userDetail.getRegionCode().replaceAll("0+?$", "");}if (userDetail.getSchoolCode() != null) {schoolForPermission = schoolService.selectByParams("schoolCode", userDetail.getSchoolCode());}// 校验姓名if (data.getName() == null) {hasError.value = true;data.setName(data.getName() + "##名字不能为空, 长度最多四汉字");}// 校验性别if (data.getGender() == 2) {hasError.value = true;data.setGenderStr(data.getGenderStr() + "##性别只能是（男、女）中的一个");}// 校验身份证号if (isEmpty(data.getIdCard()) || data.getIdCard().length() != 18) {hasError.value = true;data.setName(data.getName() + "##身份证长度18位");}if (isEmpty(data.getNation())) {hasError.value = true;data.setNation(data.getNation() + "##民族不能为空");}// ************************ 校验地区 *********************************// 判断地区表中是否包含含这一项RegionEntity region1 = null, region2 = null;for (RegionEntity item : regionList) {if (data.getRegion1() != null && data.getRegion1().contains(item.getName())) {region1 = item;}if (data.getRegion2() != null && data.getRegion2().contains(item.getName())) {region2 = item;}}// RegionEntity region = regionList.stream().filter(r -> r.getName().contains(data.getRegion())).findFirst().orElse(null);if (region1 == null) {hasError.value = true;data.setRegion1(data.getRegion1() + "##城市不存在");}if (region2 == null) {if (data.getRegion1().contains("济源")) {//济源没有区县} else {hasError.value = true;data.setRegion2(data.getRegion2() + "##区县不存在");}}if (region1 != null && region2 != null) {data.setRegionCode(region2.getCode());//判断地区和学校 是否具备权限if (isNotEmpty(userDetail.getRegionCode())) {if (String.valueOf(data.getRegionCode()).startsWith(userRegionCodeForPermission)) {//具备权限} else {hasError.value = true;data.setRegion2(data.getRegion2() + "##不具备该地区的权限");}}}//判断是否具备该学校的权限if (isNotEmpty(userDetail.getSchoolCode())) {if (isEquals(schoolForPermission.getName(), data.getSchoolName())) {//具备权限} else {hasError.value = true;data.setSchoolName(data.getSchoolName() + "##不具备该学校的权限");}} else {//不需要判断学校权限}if (isEquals(hasError.value, true)) {userWithErrorListInMap.get(userDetail.getId()).add(data);} else {//没有错误的才添加super.list.add(data);}}@Overridepublic void doAfterAllAnalysed(AnalysisContext context) {if (isEquals(hasError.value, true)) {//  有错误, 不入库} else {studentService.saveStudentWidthSchoolAndClass(super.list);}}}.start(2);if (Objects.equals(hasError.value, true)) {String errorFileName = file.getOriginalFilename().replace(".xlsx", "错误提示.xlsx");export(response, errorFileName, userWithErrorListInMap.get(userDetail.getId()));} else {PrintWriter pw = response.getWriter();//逻辑删除导入学籍时学籍不存在的学校班级（当前学期）schoolService.deleteBySchoolCode();gradeClassService.deleteByClassCode();//恢复导入学籍时学籍存在但逻辑删除的学校班级（当前学期）schoolService.updateBySchoolCode();gradeClassService.updateByClassCode();pw.write(ZsJson.toJson(new Result<>()));pw.close();}System.out.println("excel解析完成");}

下载一个后端返回的流文件

注意跨域问题

后端解决跨域问题

const downLoadExport=()=>{axios({method: 'post',url: baseUrl+"/electric/electricassets/download/assets",headers: {"Content-Type": "application/json;charset=UTF-8","token":getToken()},responseType: 'blob'}).then(response => {if (Object.values(response.headers)[0]=='application/vnd.ms-excel;charset=UTF-8'){const url = window.URL.createObjectURL(new Blob([response.data]));// 创建a标签，并隐藏a标签let link = document.createElement('a')link.style.display = 'none'// a标签的href属性指定下载链接link.href = url//setAttribute() 方法添加指定的属性，并为其赋指定的值// 后缀格式.csv/.xsls要和需要和后端返回格式相同，这里以.csv为例link.setAttribute('download',   '文件名称.xlsx')document.body.appendChild(link)link.click()document.body.removeChild(link)}})
}

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

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

相关文章

CSS 移动端 1px(线条/边框) 不同机型上显示粗细不同，解决办法

CSS 移动端 1px(线条/边框) 不同机型上显示粗细不同，解决办法

由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍&#xff0c;1px的边框在devicePixelRatio2的移动显示屏下会显示成2px&#xff0c;所以在高清瓶下看着1px总是感觉变胖了 <!DOCTYPE html> <html lang"en"> <head&g…
阅读更多...
19.删除链表的倒数第N个结点（LeetCode）

19.删除链表的倒数第N个结点（LeetCode）

想法一 先用tail指针找尾&#xff0c;计算出节点个数&#xff0c;再根据倒数第N个指定删除 想法二 根据进阶的要求&#xff0c;只能遍历一遍链表&#xff0c;那刚刚想法一就做不到 首先&#xff0c;我们要在一遍内找到倒数第N个节点&#xff0c;所以我们设置slow和fast两个指…
阅读更多...
优化编辑距离以测量文本相似度

优化编辑距离以测量文本相似度

一、说明 编辑距离是一种文本相似度度量&#xff0c;用于测量 2 个单词之间的距离。它有许多方面应用&#xff0c;如文本自动完成和自动更正。 对于这两种用例中的任何一种&#xff0c;系统都会将用户输入的单词与字典中的单词进行比较&#xff0c;以找到最接近的匹配项&#x…
阅读更多...
Codeforces Round 908 (Div. 2)题解

Codeforces Round 908 (Div. 2)题解

目录 A. Secret Sport 题目分析: B. Two Out of Three 题目分析: C. Anonymous Informant 题目分析: A. Secret Sport 题目分析: A,B一共打n场比赛&#xff0c;输入一个字符串由A和‘B’组成代表A赢或者B赢&#xff08;无平局&#xff09;&#xff0c;因为题目说明这个人…
阅读更多...
FPGA与STM32_FSMC总线通信实验

FPGA与STM32_FSMC总线通信实验

FPGA与STM32_FSMC总线通信实验 内部存储器IP核的参数设置创建IP核FPGA代码STM32标准库的程序 STM32F407 上自带 FSMC 控制器&#xff0c;通过 FSMC 总线的地址复用模式实现STM32 与 FPGA 之间的通信&#xff0c;FPGA 内部建立 RAM 块&#xff0c;FPGA 桥接 STM32 和 RAM 块&…
阅读更多...
图论13-最小生成树-Kruskal算法+Prim算法

图论13-最小生成树-Kruskal算法+Prim算法

文章目录 1 最小生成树2 最小生成树Kruskal算法的实现2.1 算法思想2.2 算法实现2.2.1 如果图不联通&#xff0c;直接返回空&#xff0c;该图没有mst2.2.2 获得图中的所有边&#xff0c;并且进行排序2.2.2.1 Edge类要实现Comparable接口&#xff0c;并重写compareTo方法 2.2.3 取…
阅读更多...
网络运维Day10

网络运维Day10

文章目录 SHELL基础查看有哪些解释器使用usermod修改用户解释器BASH基本特性 shell脚本的设计与运行编写问世脚本脚本格式规范执行shell脚本方法一方法二实验 变量自定义变量环境变量位置变量案例 预定义变量 变量的扩展运用多种引号的区别双引号的应用单引号的应用反撇号或$()…
阅读更多...
HTML使用lable将文字与控件进行关联以获取焦点

HTML使用lable将文字与控件进行关联以获取焦点

先养养眼再往下看 注释很详细&#xff0c;直接上代码 <form action""><!-- 第一种方法:用id的方式绑定账户(文字)和输入框 --><label for"zhanghu">账户</label><input "text" id"zhanghu" name"ac…
阅读更多...
一步一步详细介绍如何使用 OpenCV 制作低成本立体相机

一步一步详细介绍如何使用 OpenCV 制作低成本立体相机

在这篇文章中，我们将学习如何创建定制的低成本立体相机（使用一对网络摄像头）并使用 OpenCV 捕获 3D 视频。我们提供 Python 和 C++ 代码。文末并附完整的免费代码下载链接 我们都喜欢观看上面所示的 3D 电影和视频。您需要如图 1 所示的红青色 3D 眼镜才能体验 3D 效果。它是…
阅读更多...
时间序列预测实战(九)PyTorch实现LSTM-ARIMA融合移动平均进行长期预测

时间序列预测实战(九)PyTorch实现LSTM-ARIMA融合移动平均进行长期预测

一、本文介绍 本文带来的是利用传统时间序列预测模型ARIMA(注意&#xff1a;ARIMA模型不属于机器学习)和利用PyTorch实现深度学习模型LSTM进行融合进行预测&#xff0c;主要思想是->先利用ARIMA先和移动平均结合处理数据的线性部分&#xff08;例如趋势和季节性&#xff09…
阅读更多...
C语言求解猴子分桃问题

C语言求解猴子分桃问题

题目&#xff1a; 海滩上有一堆桃子&#xff0c;五只猴子来分。第一只猴子把这堆桃子凭据分为五份&#xff0c;多了 一个&#xff0c;这只猴子把多的一个扔入海中&#xff0c;拿走了一份。第二只猴子把剩下的桃子又平均分 成五份&#xff0c;又多了一个&#xff0c;它同样把多…
阅读更多...
HCIA-DHCP+DHCP中继

HCIA-DHCP+DHCP中继

DHCPDHCP中继 实验拓扑配置步骤第一步 配置Eth-Trunk聚合链路&二层VLAN第二步 配置IP地址第三步 配置DHCPDHCP中继 配置验证查看PC1 PC2是否正确的获得了IP地址 实验拓扑 配置步骤 第一步 配置Eth-Trunk聚合链路&二层VLAN SW1 sysname SW1 # undo info-center enabl…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023