axios同一个接口,同时接收 文件 或者 数据

1、前端代码

const service = axios.create({baseURL: "http://192.168.2.200:8080/api",timeout: 180000
})// 响应拦截
service.interceptors.response.use(async response => {if(response){// 请求时设置返回blob, 但是实际上可能返回的是json的情况if (response.data instanceof Blob) {if (!response.headers['content-type']?.includes('application/json')) {let a = document.createElement("a");a.setAttribute("href", URL.createObjectURL(response.data));a.setAttribute("download", decodeURI(response.headers['filename']));a.setAttribute("target", "_blank");a.click()return null}// 将后台返回的内容转成文本response.data = JSON.parse(await (response.data).text())}return response.data
}, err)

 主要是:if (response.data instanceof Blob)  判断是否是 Blob 对象,

否则使用:response.data = JSON.parse(await (response.data).text()) 将后台返回的内容转成 文本 返回

const formData = new FormData();
formData.append('id', 1);
formData.append('file', _file.file);const config = {headers: { 'Content-Type': 'multipart/form-data' },responseType: 'blob'
}axios.post('/file/upload', formData, config).then((res: any) => {if (res != null && res.code == 200) {alert("上传成功");} else {alert("上传失败");}})

主要是:responseType: 'blob'

2、后端代码


@Controller
@RequestMapping("api/file")
public class FileController {@PostMapping("upload")public void upload(MultipartFile file, HttpServletResponse response) {// 缓存文件String tmpDirPath = FileUtil.getTmpDirPath();// 上传文件名String originalFilename = file.getOriginalFilename();String targetFile = tmpDirPath + File.separator + originalFilename;FileUtil.writeFromStream(file.getInputStream(), targetFile);// 解析文件boolean result = parseFile(targetFile);if(!result){// 解析失败,返回失败文件InputStream in = new FileInputStream(targetFile);String filename = "解析失败_" + System.currentTimeMillis() + "_" + originalFilename;// 告诉浏览器输出内容为流response.setContentType("application/octet-stream;charset=utf-8");// 前端下载时的文件名response.setHeader("filename", URLEncoder.encode(filename, "UTF-8"));// 响应报头 指示哪些报头可以 公开 为通过列出他们的名字的响应的一部分。要公开多个自定义标题,可以用逗号分隔// 默认情况下,只显示6个简单的响应头 Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragmaresponse.setHeader("Access-Control-Expose-Headers", "filename");IOUtils.copy(in, response.getOutputStream());} else {response.setContentType("application/json;charset=utf-8");JSONObject jsonObject = new JSONObject();jsonObject.put("code", 200);jsonObject.put("message", "成功");response.getWriter().write(jsonObject.toJSONString());}// 删除临时文件FileUtil.del(targetFile);}}

需要注意的是:response.setHeader("Access-Control-Expose-Headers", "filename");

否则前端读取不到 response.headers['filename'] 的值

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

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

相关文章

[C++]笔记 - 知识点积累

一.运算符的优先级 一共15个级别 最高优先级 : () []最低优先级 :逗号表达式倒数第二低优先级 : 赋值和符合赋值(,,-...) ! >算术运算符 > 关系运算符 > && >> || >赋值运算符 二.数据类型转换 隐式类型转换 算数转换 char int long longlong flo…

解决Java中的“Unchecked cast: java.lang.Object to java.util.List”问题

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 &a…

搜索二叉树

目录 搜索二叉树的性质 搜索二叉树的实现、 插入 删除 代码 在以前我们学过二叉树,但是在对二叉树的学习中发现,似乎二叉树并没有什么作用,要论增删它比不上链表,论随机访问也没法和顺序表比,对于当时的我们是一头雾水,那么现在它的功能终于是体现出来了,这里就是我们要讲的…

[Go版]算法通关村第十一关白银——位运算的高频算法题

目录 专题1:位移的妙用题目:位1的个数(也被称为汉明重量)解法1:遍历所有位,判断每个位的数字是否是1Go代码 解法2:依次消除每个1的位 numnum&(num-1)Go代码 题目:比特位计数思路…

Mac 卸载appium

安装了最新版的appium 2.0.1,使用中各种问题,卡顿....,最终决定回退的。记录下卸载的过程 1.打开终端应用程序 2.卸载全局安装的 Appium 运行以下命令以卸载全局安装的 Appium: npm uninstall -g appium 出现报错:Error: EACCES: permiss…

云安全攻防(十二)之 手动搭建 K8S 环境搭建

手动搭建 K8S 环境搭建 首先前期我们准备好三台 Centos7 机器,配置如下: 主机名IP系统版本k8s-master192.168.41.141Centos7k8s-node1192.168.41.142Centos7k8s-node2192.168.41.143Centos7 前期准备 首先在三台机器上都执行如下的命令 # 关闭防火墙…

Python读取Word统计词频输出到Excel

1.安装依赖的包 "# 读取docx\n", "!pip install python-docx\n", "!pip install -i https://pypi.tuna.tsinghua.edu.cn/simple python-docx\n", "# 中英文分词\n", "!pip install jieba\n", "!pi…

postman测试后端增删改查

目录 一、本文介绍 二、准备工作 (一)新建测试 (二)默认url路径查看方法 三、增删改查 (一)查询全部 (二)增加数据 (三)删除数据 (四&…

nginx反向代理流程

一、nginx反向代理流程 反向代理:使用代理服务器来接受internet上的连接请求,然后将请求转发给内部网络中的上游服务器,并将上游服务器得到的结果返回给请求连接的客户端,代理服务器对外表现就是一个web服务器。Nginx就经常拿来做…

【内网穿透】如何实现在外web浏览器远程访问jupyter notebook服务器

文章目录 前言1. Python环境安装2. Jupyter 安装3. 启动Jupyter Notebook4. 远程访问4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5. 固定公网地址 前言 Jupyter Notebook,它是一个交互式的数据科学和计算环境,支持多种编程语言,如…

信也科技一面凉经

1.在项目经历里挑一个详细介绍一下 项目的应用场景 2.项目里用到多线程是怎么用的?回答:线程池 用通过 ThreadPoolExecutor 构造函数的方式创建的线程池 3.线程池有哪些重要参数?回答:核心线程数、最大线程数、阻塞队列类型、…

【爱书不爱输的程序猿】公网访问本地搭建的WEB服务器之详细教程

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享,与更多的人进行学习交流 本地电脑搭建Web服务器并用cpolar发布至公网访问 前言1. 首先将PHPStudy、WordPress、cpolar下载到电脑2. 安装PHPStudy3. 安装cpolar,进入Web-UI界面4.安装wordpress5.…

KU Leuven TU Berlin 推出“RobBERT”,一款荷兰索塔 BERT

荷兰语是大约24万人的第一语言,也是近5万人的第二语言,是继英语和德语之后第三大日耳曼语言。来自比利时鲁汶大学和柏林工业大学的一组研究人员最近推出了基于荷兰RoBERTa的语言模型RobBERT。 谷歌的BERT(来自Transformers的B idirectional …

C语言 常用工具型API --------system()

函数名: system() 用 法: int system(char *command); 原理: 创建一个子进程去加载一个新程序执行,而Linux命令基本都是一个单独的进程实现的,所以你所掌握的Linux命令越多,该函数…

AUTOSAR规范与ECU软件开发(实践篇)4.2 基于Matlab/Simulink的软件组件开发

目录 前言 1 、Matlab/Simulink与AUTOSAR基本概念的对应关系 2 、软件组件内部行为建模方法

由浅入深学习Tapable

文章目录 由浅入深学习TapableTapable是什么Tapable的Hook分类同步和异步的 使用Sync*同步类型钩子基本使用bailLoopWaterfall Async*异步类型钩子ParallelSeries 由浅入深学习Tapable webpack有两个非常重要的类:Compiler和Compilation。他们通过注入插件的方式&a…

CentOS系统环境搭建(一)——Centos7更新

Centos7更新 更新 yum(包括centos内核) yum update执行后,系统将更新到centos 7.9。 从这一篇文章开始开始,我将开始在centos系统环境搭建🔗https://blog.csdn.net/weixin_43982359/category_12411496.html中开始对C…

【数据分析入门】Numpy进阶

目录 一、数据重塑1.1 透视1.2 透视表1.3 堆栈/反堆栈1.3 融合 二、迭代三、高级索引3.1 基础选择3.2 通过isin选择3.3 通过Where选择3.4 通过Query选择3.5 设置/取消索引3.6 重置索引3.6.1 前向填充3.6.2 后向填充 3.7 多重索引 四、重复数据五、数据分组5.1 聚合5.2 转换 六、…

回溯算法详解

目录 回溯算法详解 回溯VS递归 回溯算法的实现过程 n个结点构造多本节要讨论的是当给定 n(n>0)个结点时,可以构建多少种形态不同的树。 回溯算法详解 回溯算法,又称为“试探法”。解决问题时,每进行一步&#…

主成分分析Python代码

对于主成分分析详细的介绍:主成分分析(PCA)原理详解https://blog.csdn.net/zhongkelee/article/details/44064401 import numpy as np import pandas as pd标准PCA算法 def standeredPCA(data,N): #data:…