post方式返回文件流实现前端blob下载,responseType: ‘blob‘无效

原创 已于 2022-07-12 17:11:50 修改 · 4.4k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#blob #文件下载 #流文件

于 2022-07-12 16:23:25 首次发布
本文探讨了如何在POST请求中通过设置responseType为blob下载文件流时遇到的问题，重点在于mockjs的影响和如何通过修改或禁用mockjs实现正确转换。 
responseType: 'blob'

一般情况下，下载分为好几种，但是常用的是get下载文件流直接下载

post下载文件流是很少见的，但是鉴于参数太多，不能走get 只能走post下载，post下载分为两种：

1.form表单下载

2.post返回文件流转成blob下载，研究了很久 也很坑，上代码：

这个地方如果responseType设为blob的话，返回的文件流将会被转成blob对象，不是文件流，但是无论怎么设置都没有转成blob对象，网上有很多解释，

一个是说封装好的axios设置responseType是无效的，于是乎，我就引入了原生axios，手动添加token认证和content-type,但是返回结果依然是文件流，兜兜转转后来才发现最坑的是mockjs的引入，mockjs会影响responseType的设置转换，项目中注释掉mockjs即可实现成功blob的转换，还有就是可以修改mockjs的原生代码，如果需要用到mockjs的简友们可以修改代码，不过偶同步更新依赖包的时候记得及时修改，如果mockjs可以在项目中抛弃的话建议直接main.js中删除引入，毕竟还有其他的坑.

Vue2 - 判断接口返回的二进制文件流 Blob 是二进制文件流对象还是 JSON 错误提示信息，当请求设置 responseType: blob 时捕获后端状态码返回的是可下载文件还是下载失败提示
🏆 前端领域优质创作者
12-29 5142
vue2，blob文件流下载判断，vue2下载二进制文件流Blob对象时接口没有状态码了怎么办，接口返回状态码但打印是blob对象如何提示错误，vue下载文件流成功时返回blob，失败时返回json提示信息，vue前端下载文件responseType设置为blob,怎么获取到后端返回的异常信息，vue文件流下载时拿不到后端接口的错误提示，vue2下载blob文件时怎么能根据接口状态码提示错误，vue2blob对象下载如何判断接口状态码，vue判断下载是否成功返回了二进制文件流还是返回了失败对象错误信息，请
axios设置responseType: ‘blob‘，获取接口返回的错误信息
风如也的博客
09-03 2015
在axios的请求中当后端接口返回的是文件流的情况下，我们需要在请求参数里面设置。，如果接口报错，默认前端无法获取后端返回的错误信息。network中返回的是文件流数据。
vue3 POST请求中，文件流下载添加responseType: ‘arraybuffer‘的问题
weixin_48420104的博客
07-22 933
如果responseType的值改为'blob'，responseType: 'blob' // 确保将响应类型设置为blob，会发现可以下载，但是打开不了。是一个方法，用于发送 POST 请求。你需要将原始的 Axios 请求改写为使用这个代理对象的方法。用于存储请求返回的数据，你可以在模板或其他计算属性中使用它。最后，你可以在组件的适当位置调用。函数，例如在组件的生命周期钩子中，或者在用户触发的事件处理函数中。是假设的，你需要根据你的项目实际情况来调整。方法接受正确的参数，并且能够处理响应类型。
java post文件流的操作
12-16
适用于javapost 文件流提交和接收数据
Java后端HttpClient Post提交文件流 及服务端接收文件流
12-24
HttpClient Post提交多文件及多个普通参数,已经封装成工具类。 需传入 要请求的url 普通参数map 例 map.put("param1","张三"); 需要传入的文件流map 其中key为文件名 服务端接收无乱码。
【JavaScript】使用 responseType: “blob“ 请求文件流时拦截报错信息处理
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-29 1333
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。下载文件时，后台返回错误的 code 无法直接拦截，因为此时数据已经被包装成 blob，所以需要将 blob 转换为 json 解析。readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容 (字符串形式)
前端下载文件流，设置返回值类型responseType:‘blob‘无效的问题
Amelian的博客
01-16 7154
本是一个非常简单的请求，即是下载文件。通常的做法如下：1.前端通过Vue Axios向后端请求，同时在请求中设置响应体为Blob格式。2.后端相应前端的请求，同时返回Blob格式的文件给到前端（如果没有步骤1设置响应体，则后端返回的是一个文件流，前端）3.前端创建a标签进行下载如果后端返回的是文件的地址，那么前端可以直接通过加文件路径即可下载文件。但是如果后台返回的是文件流，那么前端就需要做一些处理。处理的核心也是将文件流转成文件，然后使用a标签模拟点击下载。
vue post请求返回arraybuffer文件流下载文件
Laladoge的博客
02-03 2767
post文件下载文件流处理、提示文字编码转化
后台返回文件流Blob或者二进制，前端进行处理下载文件；接口返回下载地址，前端实现下载；文件返回失败时接口返回json，前端需要弹出错误提示；前端返回的文件流pdf在浏览器新标签页打开
Sunny_lxm的博客
04-13 8925
下载文件失败时，接口返回json格式，前端判断格式如果是json格式时前端接口弹出错误提示。前端返回的文件流pdf在浏览器新标签页打开。二进制arraybuffer下载。接口返回下载地址，前端实现下载。
后端返回文件流乱码，responseType:‘blob‘无效的问题
jsPao的博客
01-11 1486
项目中使用的mock.js模拟数据，http请求库使用的是axios，业务场景是请求后台接口，返回二进制数据，展示为图片。此时使用的是正式数据，仅仅是引入了mock并没有使用，结果前端展示不出来。开始漫长的网上找跳坑大法之路，发现了一篇文章，mock模块会修改原生ajax，使得responseType的值变成‘’空字符串。后来考虑axios设置content-type：blob和arraybuffer不同的问题，发现也不是。首先想到的是后台返回的格式本身是错误的，通过在后台打开发现没问题。
vue axios(获取文件流乱码)设置返回值类型responseType:‘blob‘无效
08-12 8562
一、需求 vue项目，要求通过接口获取第三方平台传输的文件流，无需下载，获取后转成文件自动上传到当前平台媒资库。 二、开发过程 经过百度，找到了将文件转换成blob文件流格式，再将blob转换成file文件 let blob = new Blob([data]);//data是文件流(字符串格式，此时还没有意识到出现了乱码问题) let file = new File([blob], row[1], {type:"audio/mpeg"}); 整合到自己代码中，因为设置了responseType: “bl
前端下载文件流，解决设置返回值类型responseType:‘blob‘无效的问题
qq_52700250的博客
05-31 1678
前端下载文件流，解决设置返回值类型responseType:‘blob‘无效的问题
vue axios(下载文件流)设置返回值类型responseType:‘blob‘无效的问题
热门推荐
hunt_er的博客
12-10 1万+
在做vue项目时，要求使用axios异步下载后端传输的文件流，下载之后的文件打开是乱码。F12一看，浏览器拿到的不是Blob类型的，而是一串字符串乱码。操作如下： 1.写axios接口 import axios from 'axios' export const uploadFileRequest = (url, body, params) => { let token = getTokens() let queryParams = { 'access_token': token.ac
通过post请求下载接口，接口返回流数据，前端处理下载或展示出错信息
一键写代码的博客
08-15 4214
处理二进制流数据下载，前端判断json还是流数据
Postman保存接口返回的文件流
易水寒冰的博客
02-08 2931
postman
小功能实现（十五）POST请求，向后端传递参数，并获取返回的文件流（vue）
qq_44648936的博客
07-17 2398
携带参数，获取文件流
获取http的get或者post请求，返回文件流的处理方式记录，包含：file转MultipartFile、hutool工具包使用等方法
Ran2021的博客
04-14 1950
下面案例为，请求url后，返回文件流，然后处理完成后，上传到minio；http请求url，返回的是文件流，怎么处理这个文件流方案。案例使用的是hutool工具包，请导入相关maven依赖；
vue中post请求返回二进制流文件下载
weixin_68531033的博客
08-06 998
4.关于Excel导出 POI 响应头设置 Content-Type: application/vnd.ms-excel 异常解决方法,可以在需要的请求头处多加一个。踩坑一 : 封装的index.ts请求中使用了mockjs 这会导致 blob 置空 ,建议直接使用axios请求。3.我们自行二次封装的axios可能会导致乱码现象,建议直接用axios调用接口请求。注:如果下载的文件为 [object,object] ,将res.data给函数就行。1 .调用接口返回的如下图所示,此时看到是一个流文件。
angular post请求设置responseType:‘blob‘
weixin_42764602的博客
09-22 987
属性“responseType”的类型不兼容
前端下载txt文件，发起post请求，responseType设置为blob报错
最新发布
11-09
<think>首先，用户的问题是：“前端下载txt文件时发起post请求并将responseType设置为blob报错的解决方案”。用户想要解决在下载txt文件时设置responseType为blob后出现报错的问题。 我有多条引用： - 引用[1]提到下载文件的方法，需要在请求中设置responseType为blob，并注意如果mock拦截会导致问题。 - 引用[2]展示在Angular中设置responseType的方法。 - 引用[3]强调mockjs会影响responseType的设置，建议移除或修改mockjs。 - 引用[4]讨论当后端返回错误信息而非文件流时如何处理。 关键点： - **设置responseType为blob**：这是下载文件流的关键步骤。 - **mockjs问题**：多个引用指出mockjs会干扰二进制流的处理，导致responseType失效或数据被错误转换。 - **错误处理**：当后端返回错误（如JSON错误信息）而非文件流时，直接当作blob处理会出错。 用户的具体场景是下载txt文件，所以问题可能类似：设置responseType为blob后，如果后端返回错误，前端会报错。 可能的解决方案： 1. **避免mock干扰**：移除mockjs或关闭mock，因为它会覆盖responseType设置。 2. **正确处理响应**：检查响应类型，如果是错误，解析错误信息而不是当作blob下载。 3. **代码实现**：在下载函数中，处理可能的错误响应。 回答结构： - **确认问题**：解释为什么报错可能发生。 - **提供解决方案**：一步一步地给出代码示例和解释。 - **添加相关问题**：生成相关问题以扩展知识。 语言要求：使用中文回答。 系统指令： - 行内数学表达式用$...$格式（虽然这里可能不涉及数学）。 - 独立公式用$$...$$格式（可能不需要）。 - LaTeX语法正确（确保代码块正确）。 - 生成相关问题。 - 引用末尾添加引用标识。 生成相关问题： 基于用户查询，相关主题包括： - 如何处理文件下载错误？ - 如何在React或Angular中实现类似功能？ - 如何避免mock干扰？ - 其他下载方法的比较。 最终回答结构： 1. **问题分析**：简述报错原因。 2. **解决方案**：详细步骤，包括代码示例。 3. **注意事项**：如mockjs问题。 4. **相关问题**：列出几个相关问题。 </think>### 前端下载txt文件时设置responseType为blob报错的解决方案 当使用POST请求下载txt文件并将`responseType`设置为`blob`时，报错通常是由于两个主要原因：(1) **mock工具（如mockjs）干扰二进制流处理**，导致响应数据被转换成字符串而非blob对象；(2) **后端返回错误信息而非文件流**时，前端无法正确解析为blob。以下是详细的解决步骤和代码示例： #### 1. **检查并移除mock干扰（最常见根本原因）** mockjs会覆盖原生XMLHttpRequest，强制转换响应数据类型（如将blob转为字符串），导致下载的文件损坏或报错。 - **解决方案**：移除或禁用项目中引入的mockjs。 - 在入口文件（如`main.js`）中删除mockjs的导入： ```javascript // 删除或注释掉以下代码 // import './mock' // 移除mockjs引入 ``` - 或临时关闭mock：在开发环境中停用mock拦截。 - **引用支持**：mockjs会重写请求对象，影响responseType设置，必须移除才能确保blob处理正常[^1][^3]。 #### 2. **正确处理后端错误响应** 当后端返回错误信息（如JSON格式）而非文件流时，直接作为blob解析会报错。需在下载函数中添加错误处理逻辑。 - **解决方案**：使用`res.headers['content-type']`检查响应类型，如果是错误则另行处理。 ```javascript async function downloadTxtFile() { try { const res = await axios.post('/api/download', params, { responseType: 'blob' }); // 检查响应内容类型：如果是错误（如application/json），解析错误信息 if (res.headers['content-type'].includes('application/json')) { const reader = new FileReader(); reader.onload = () => { const errorData = JSON.parse(reader.result); console.error('下载失败', errorData.message); }; reader.readAsText(res.data); // 将blob转为文本解析错误 } else { // 正常文件流处理 const blob = new Blob([res.data], { type: 'text/plain' }); // 指定txt类型 const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'file.txt'; // 设置文件名 document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); } } catch (error) { console.error('请求异常', error); } } ``` - **关键点**：`responseType: 'blob'`必须设置在请求配置中[^2]，并使用`Blob`构造函数确保数据正确转换。 - **引用支持**：当后端返回非文件流时，需额外校验content-type以避免解析失败[^4]。 #### 3. **确保请求配置正确** - **axios设置**：在POST请求中显式声明`responseType`： ```javascript export const downloadFile = (params) => { return axios.post('/api/download', params, { responseType: 'blob' }); // 必须在此处设置 }; ``` - 避免在拦截器中设置，可能导致失效。 - **Angular示例**（如适用）： ```typescript exportExl(params: any) { const options = { responseType: 'blob' as 'json' }; // 类型断言 return this.http.post('api/download', params, options); } ``` #### 注意事项 - **文件类型指定**：生成blob时添加`{ type: 'text/plain' }`，避免txt文件损坏。 - **跨域问题**：确保后端支持CORS，响应头包含`Access-Control-Allow-Origin`。 - **测试建议**：先用Postman验证接口返回的是二进制流而非字符串。 通过这些步骤，您可以解决因mock干扰或错误响应导致的报错，成功下载txt文件。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值