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.mzph.cn/news/140064.shtml

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

相关文章

C语言--输入10个数字,要求输出其中值最大的元素和该数字是第几个数

今天小编带大家了解一下什么是“打擂台”算法。 一.思路分析 可以定义一个数组arr&#xff0c;长度为10&#xff0c;用来存放10个数字&#xff0c;设计一个函数Max&#xff0c;用来求两个数中的较大值&#xff0c; 定义一个临时变量tmparr[0],保存临时最大的值&#xff0c;下标…

Hive 常用存储、压缩格式

1. Hive常用的存储格式 TEXTFI textfile为默认存储格式 存储方式&#xff1a;行存储 磁盘开销大 数据解析开销大 压缩的text文件 hive 无法进行合拆分 SEQUENCEFILE sequencefile二进制文件&#xff0c;以<key,value>的形式序列到文件中 存储方式&#xff1a;行存储 可…

Gogs安装和部署教程-centos上

0、什么是 Gogs? Gogs 是一款极易搭建的自助 Git 服务。 Gogs 的目标是打造一个最简单、最快速和最轻松的方式搭建自助 Git 服务。使用 Go 语言开发使得 Gogs 能够通过独立的二进制分发&#xff0c;并且支持 Go 语言支持的 所有平台&#xff0c;包括 Linux、Mac OS X、Windo…

记录一次某某虚拟机的逆向

导语 学了一段时间的XPosed&#xff0c;发现XPosed真的好强&#xff0c;只要技术强&#xff0c;什么操作都能实现... 这次主要记录一下我对这款应用的逆向思路 apk检查 使用MT管理器检查apk的加壳情况 发现是某数字的免费版本 直接使用frida-dexdump 脱下来后备用 应用分…

Maven内网开发使用离线仓库

Maven内网开发使用离线仓库 离线或者内网环境开发与外网不通&#xff0c;中央仓库连不上&#xff0c;使用 Maven 管理项目会遇到很多问题。 比如&#xff1a;依赖包缺失&#xff0c;内网的Nexus私服的包老旧&#xff0c;很久没有维护&#xff0c;项目无法运行打包&#xff0c;…

C++语言的广泛应用领域

目录 1. 系统级编程 2. 游戏开发 3. 嵌入式系统 4. 大数据处理 5. 金融和量化分析 6. 人工智能和机器学习 7. 网络和通信 结语 C是一种多范式编程语言&#xff0c;具有高性能、中级抽象能力和面向对象的特性。由Bjarne Stroustrup于1979年首次设计并实现&#xff0c;C在…

基于蜉蝣算法优化概率神经网络PNN的分类预测 - 附代码

基于蜉蝣算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于蜉蝣算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于蜉蝣优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络的光滑…

Excel表列序号

题意&#xff1a; 给你一个字符串 columnTitle &#xff0c;表示 Excel 表格中的列名称。返回 该列名称对应的列序号 。 例如&#xff1a; A -> 1 B -> 2 C -> 3 … Z -> 26 AA -> 27 AB -> 28 … 示例 1: 输入: columnTitle “A” 输出: 1 示例 2: 输…

指标体系:洞察变化的原因

一、指标概述 指标体系是指根据运营目标&#xff0c;整理出可以正确和准确反映业务运营特点的多个指标&#xff0c;并根据指标间的联系形成有机组合。 指标体系业务意义极强&#xff0c;所有指标体系都是为特定的业务经营目的而设计的。指标体系的设计应服从于这种目的&#x…

【fast2021论文导读】 Learning Cache Replacement with Cacheus

文章:Learning Cache Replacement with Cacheus 导读摘要: 机器学习的最新进展为解决计算系统中的经典问题开辟了新的、有吸引力的方法。对于存储系统,缓存替换是一个这样的问题,因为它对性能有巨大的影响。 本文第一个贡献,确定了与缓存相关的特征,特别是,四种工作负载…

Java自学第9课:JSP基础及内置对象

目录&#xff1a; 目录 1 JSP基础知识架构 1 指令标识 1 Page命令 2 Including指令 3 taglib指令 2 脚本标识 1 JSP表达式 2 声明标识 3 代码片段 3 JSP注释 1 HTML注释 2 带有JSP表达式的注释 3 隐藏注释 4 动态注释 4 动作标识 1 包含文件标识 2 请求转发标…

模型部署:量化中的Post-Training-Quantization(PTQ)和Quantization-Aware-Training(QAT)

模型部署&#xff1a;量化中的Post-Training-Quantization&#xff08;PTQ&#xff09;和Quantization-Aware-Training&#xff08;QAT&#xff09; 前言量化Post-Training-Quantization&#xff08;PTQ&#xff09;Quantization-Aware-Training&#xff08;QAT&#xff09; 参…

FFmpeg简介1

适逢FFmpeg6.1发布&#xff0c;准备深入学习下FFmpeg&#xff0c;将会写下系列学习记录。 在此列出主要学习资料&#xff0c;后续再不列&#xff0c;感谢这些大神的探路和分享&#xff0c;特别是雷神&#xff0c;致敬&#xff01; 《FFmpeg从入门到精通》 《深入理解FFmpeg》 …

Git版本控制系统之分支与标签(版本)

目录 一、Git分支&#xff08;Branch&#xff09; 1.1 分支作用 1.2 四种分支管理策略 1.3 使用案例 1.3.1 指令 1.3.2 结合应用场景使用 二、Git标签&#xff08;Tag&#xff09; 2.1 标签作用 2.2 标签规范 2.3 使用案例 2.3.1 指令 2.3.2 使用示例 一、Git分支&…

分布式理论基础:CAP定理

什么是CAP CAP原则又称CAP定理&#xff0c;指的是在一个分布式系统中&#xff0c;Consistency&#xff08;一致性&#xff09;、 Availability&#xff08;可用性&#xff09;、Partition tolerance&#xff08;分区容错性&#xff09;这三个基本需求&#xff0c;最多只能同时…

Unity Mirror学习(二) Command特性使用

Command&#xff08;命令&#xff09;特性 1&#xff0c;修饰方法的&#xff0c;当在客户端调用此方法&#xff0c;它将在服务端运行&#xff08;我的理解&#xff1a;客户端命令服务端做某事&#xff1b;或者说&#xff1a;客户端向服务端发消息&#xff0c;消息方法&#xff…

几种解决mfc140.dll文件缺失的方法,电脑提示mfc140.dll怎么办

电脑提示mfc140.dll缺失&#xff0c;如果你不去处理的话&#xff0c;那么你的程序游戏什么都是启动不了的&#xff0c;如果你想知道有什么方法可以解决那么可以参考这篇文章进行解决&#xff0c;今天给大家几种解决mfc140.dll文件缺失的方法。电脑提示mfc140.dll也不用担心解决…

Qt贝塞尔曲线

目录 引言核心代码基本表达绘制曲线使用QEasingCurve 完整代码 引言 贝塞尔曲线客户端开发中常见的过渡效果&#xff0c;如界面的淡入淡出、数值变化、颜色变化等等。为了能够更深的了解地理解贝塞尔曲线&#xff0c;本文通过Demo将贝塞尔曲线绘制出来&#xff0c;如下所示&am…

基于SSM的数据结构课程网络学习平台

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

Git系列之分支与标签的使用及应用场景模拟

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《Git实战开发》。&#x1f3af;&#x1f3af; &a…