后端返回文件流乱码，responseType:‘blob‘无效的问题

最新推荐文章于 2024-07-02 11:58:25 发布
最新推荐文章于 2024-07-02 11:58:25 发布
阅读量929 收藏 9
点赞数 12
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/array__/article/details/135370951
版权

项目中使用的mock.js模拟数据，http请求库使用的是axios，业务场景是请求后台接口，返回二进制数据，展示为图片。此时使用的是正式数据，仅仅是引入了mock并没有使用，结果前端展示不出来。

首先想到的是后台返回的格式本身是错误的，通过在后台打开发现没问题。

后来考虑axios设置content-type：blob和arraybuffer不同的问题，发现也不是。

然后考虑axios设置responseType：blob和arraybuffer，发现也不是。

开始漫长的网上找跳坑大法之路，发现了一篇文章，mock模块会修改原生ajax，使得responseType的值变成‘’空字符串。

【2020-11-03】文件流乱码、axios responseType 不生效_vue 如何查看responsetype设没设置成功-CSDN博客

jsPao
关注
  • 12
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
常用文件流下载文件（ Blob）时各种类型文件的 type
02-09
常用文件流下载文件（ Blob）时各种类型文件的 type
【2020-11-03】文件流乱码、axios responseType 不生效
qq_39211165的博客
11-03 1452
事件 后端接口返回的二进制流，竟然乱码？ 一开始，我是以为本来就长这样，然后我就熟练的 new Blob()… 总说我文件损坏，好吧，是我比较菜，方法可能不正确 各种百度转 blob，生成 URL 当然还是失败告终 捣鼓了大半天，axios 配置也看了一遍,可是咋就是不行呢。。 this.axios.get(url, null, {responseType: 'blob'}) 大半天后 找到同样遇到这个问题已经解决的大佬， mockjs 真是藏得好深啊~~ mock模块会影响原生的ajax请求，使得服
请求响应什么情况要使用 responseType: ‘blob‘
最新发布
weixin_44161385的博客
07-02 597
请求响应什么情况要使用 responseType: 'blob'
responseType为blob的请求，如何获取错误信息
weixin_41722909的博客
02-01 1万+
一个请求如下： axios({ method: 请求方式, url: 接口路径, data: 接口参数, dataType: 'json', responseType: 'blob', headers: { // 项目中请求头需要的信息（如果不需要可不写），如用户登录信息验证： authorization: localStorage.getItem('authorization') } }).then(response => { }).catch(err
接口设置了responseType:‘blob‘后，接收不到后端错误信息
weixin_52137696的博客
08-11 2378
下载文件流，需要接口设置responseType:'blob'，接口设置了responseType:'blob'后，拿不到后端接口的异常信息
记导出文件类型responseType:blob的坑
热门推荐
weixin_45944917的博客
10-17 1万+
前端无法解析json 当后端文件导出失败时,返回的类型是json respons.setContentType("application/json") 这时候前端axios设置了blob时,那到的数据就是blob而不是json,是无法正常解析的。而要通过json转换的形式进行解析。 前端代码 axios.post(url,data.responseType:blob).then(res=>{ let data=res.date; //先判断类型,如果是json就直接输出后端的msg if(dat
前端文件导出设置responseType为blob时遇到的问题
weixin_46018417的博客
02-15 6700
导出文件接口返回code和msg如何获取。
前端下载文件流，设置返回值类型responseType:‘blob‘无效的问题
Amelian的博客
01-16 5795
本是一个非常简单的请求，即是下载文件。通常的做法如下：1.前端通过Vue Axios向后端请求，同时在请求中设置响应体为Blob格式。2.后端相应前端的请求，同时返回Blob格式的文件给到前端（如果没有步骤1设置响应体，则后端返回的是一个文件流，前端）3.前端创建a标签进行下载如果后端返回的是文件的地址，那么前端可以直接通过加文件路径即可下载文件。但是如果后台返回的是文件流，那么前端就需要做一些处理。处理的核心也是将文件流转成文件，然后使用a标签模拟点击下载。
使用responseType: “blob“请求文件流时拦截报错信息
Dalin0929的博客
02-23 2261
使用responseType: "blob"请求文件流时拦截报错信息
【采坑分享】导出文件流responseType:“blob“如何提示报错信息
happy921212的博客
11-24 2976
近日业务中导出按钮需要直接下载接口中的文件流，导出文件流responseType:"blob"如何提示报错信息？方法如下……
解决vue下载后台传过来的乱码流的问题
01-22
后台返回的乱码流 解决办法： 请求方式用的是axios，主要加关键的 {responseType: ‘blob’} axios封装 export function postDownload(url, data) { 　return new Promise((resolve, reject) => { 　instance.post...
vue解析后端返回的二维码图片数据流
01-07
后端返回图片数据流，打印结果是乱码，如下： Chrome浏览器的preview中可以看到二维码（图片），如下： 解析思路： 尝试用二进制大对象Blob解析，然后生成图片的URL，代码如下： // QRCode 为后端接口返回的图片...
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
04-22
当后端服务器处理文件上传并返回流数据时，前端需要能够接收这些流数据并将其转化为可预览或下载的格式，例如PDF。以下是三种在VueCLI3.0项目中实现PDF预览的方法： 1. **使用PDF.js库** PDF.js是Mozilla维护的一...
React获取Java后台文件流并下载Excel文件流程解析
08-19
3. React前端文件流处理：使用axios库发送POST请求，设置responseType参数为blob，处理响应数据。 4. 文件下载：使用anchor标签来下载Excel文件。 React获取Java后台文件流并下载Excel文件流程解析需要在Java后台...
前端下载文件
XYXYYDD的博客
11-07 549
前端下载文件
文件流下载之——axios请求responseType为blob时，错误数据处理
Anyuegogogo的博客
05-11 2872
背景：一个文件下载的需求，如果成功下载data数据返回的是文件流，如果失败后端会返回失败信息，类似{code: -1, data: null, msg: 'xxx'}。然而如果用responseType: 'blob'去接文件流的话，返回的错误信息也会转为blob数据格式。我们需要对返回错误信息的数据做处理，页面上提示错误信息。
blob文件导出，设置了responseType: ‘blob‘之后，如果返回json错误信息，处理方法
m0_64399627的博客
09-26 3302
使用 new FileReader()，将 blob 转为 json，然后进行处理。
responsetype: blob 后端返回类型
05-24
当使用 `responsetype: blob` 时，后端返回的数据会被视为二进制数据，并被存储在一个 `Blob` 对象中。这种类型常用于处理文件下载、图像上传等二进制数据的场景。在获取到 `Blob` 对象后，可以使用 `FileReader` 对象进行读取和处理。以下是一个使用 `responsetype: blob` 的示例代码： ```javascript const xhr = new XMLHttpRequest(); xhr.open('GET', '/example.jpg'); xhr.responseType = 'blob'; xhr.onload = function() { const blob = xhr.response; const reader = new FileReader(); reader.readAsDataURL(blob); // 将二进制数据转为 base64 编码的字符串 reader.onload = function() { const base64Data = reader.result; console.log(base64Data); // 输出 base64 编码的字符串 } } xhr.send(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值