axios设置responseType: “blob“失败原因- mock模块会影响原生的ajax请求，使得返回的blob类型变成乱码

已于 2023-04-19 14:33:01 修改
阅读量932 收藏 1
点赞数 2
分类专栏： 踩坑记录 文章标签： ajax javascript java
于 2023-04-19 14:27:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43972992/article/details/130243128
版权

axios设置responseType: "blob"失败原因- mock模块会影响原生的ajax请求，使得返回的blob类型变成乱码

sources是本地文件或者线上的文件地址
发送请求的代码

axios.get(sources, { responseType: "blob" }).then(res => {
  console.dir(res)
})

正常设置responseType: "blob"

在这里插入图片描述

使用了mock导致失败的情况

在这里插入图片描述

小火车况且况且
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios-mock-adapter：允许轻松模拟请求的Axios适配器
02-03
Axios模拟适配器 Axios适配器，可轻松模拟请求安装使用npm： $ npm install axios-mock-adapter --save-dev 它也可以作为UMD版本使用： axios-mock-adapter可在Node以及浏览器上使用，并且可与axios v0.9.0及更高...
使用axios请求接口,几种content-type的区别详解
10-16
在使用axios进行API请求时，`Content-Type`头字段是一个非常关键的设置，它定义了发送的数据格式。本文将详细讲解几种常见的`Content-Type`值的区别。 首先，默认情况下，如果在axios请求配置中不指定`Content-Type...
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
基于axios 的responseType类型的设置方法
12-13
responseType值的类型可为如下 axios请求下载导出一个文件，请求成功时返回的是一个流形式的文件，需要设置responseType: ‘arraybuffer’，但是请求失败的需要返回的是json数据， 所以需要把arraybuffer转成Json对象。 例： 请求设置了responseType: ‘arraybuffer’， 请求成功时，下载文件， 请求失败时，后端返回json对象，如：{“msg”:”系统异常”,”code”:1,”success”:false}，也被转成了arraybuffer 我的解决方案是，失败时，将数据arraybuffer转成Json对象就好了。 举
axios配置 responseType: “blob“
最新发布
ivan5277的博客
05-10 1170
在使用 Axios 进行网络请求时，配置是用来指示 Axios 将响应体作为Blob对象处理。这在文件下载功能中特别有用，因为Blob对象可以被用来创建一个指向该文件内容的 URL，进而触发浏览器的下载行为或者在页面上展示文件内容（如图片预览）。
vue axios请求设置content-type无效
小白白的博客
06-21 2196
vue-admin-template开发中在request请求中设置了Content-type，但是在在浏览器中查看请求主体并没有Content-type service.interceptors.request.use( config => { if (store.getters.token) { config.headers['X-Token'] = getToken(); } config.headers["Content-type"] = "applic
关于axios 的responseType类型的设置
weixin_42776027的博客
09-08 8766
关于axios 的responseType类型的设置 responseType值的类型可为如下 axios请求下载导出一个文件，请求成功时返回的是一个流形式的文件，需要设置responseType: 'arraybuffer'，但是请求失败的需要返回的是json数据， 所以需要把arraybuffer转成Json对象。 例： 请求设置了responseType: 'arraybuffer'， 请求成功时，下载文件， 请求失败时，后端返回json对象，如：{"msg":"系统异常","code"
axios请求设置responseType为‘blob‘或‘arraybuffer‘下载时，正确处理返回值
热门推荐
code_carrierV1的博客
10-13 1万+
问题：调用后台图片接口，后台返回二进制流图片数据格式。前端接收到流后处理数据显示在img标签。解决：返回的string直接放在img标签src可直接显示。
ajax方式下载文件
见贤思齐
08-16 1656
前端采用异步方式请求 axios({ method: 'POST', url: this.downTemplateUrl, params: { type: 1 }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, re...
ajax-maker：基于axios的ajax请求库（https：github.comaxiosaxios）
02-02
Ajax制作器 API import Request from 'ajax-maker' ; type CodeMap = { suc_code ?: string | number | boolean ; err_code ?: string | number ; login_code ?: string | number ; } ; type ...
js导出文件到所选目录
baidu_39009276的博客
09-19 1392
js导出文件到所选目录
文件流乱码、axios responseType 不生效
全栈小菜鸟
09-22 2486
事件 后端接口返回的二进制流，竟然乱码？ 一开始，我是以为本来就长这样，然后我就熟练的 new Blob()… 总说我文件损坏，好吧，是我比较菜，方法可能不正确 各种百度转 blob，生成 URL 当然还是失败告终 捣鼓了大半天，axios 配置也看了一遍,可是咋就是不行呢。。 this.axios.get(url, null, {responseType: 'blob'}) 1 大半天后 找到同样遇到这个问题已经解决的大佬， mo...
vue axios 请求头的Content-Type没有生效
maggie的博客
08-17 1887
post请求500但是postMan、apiPost测试都没有问题，发现多了一个 content-type多了application/x-www-form-urlencoded， axios请求头设置了content-type，但是post请求没有生效，请求时content-type自动改为application/x-www-form-urlencoded，我看了一遍又一遍的代码，写法是没有问题的，因为qs也是用了的。解决方法：降低了axios版本，就好啦。
ajax 下载文件 返回blob类型
lf1934305268的博客
03-10 5060
普通的jQuery中的ajax请求后台，并不能处理Blob类型的数据，这里用的原生的XMLHttpRequest请求后台 var xhr = new XMLHttpRequest(); xhr.open("get",url, true); xhr.responseType = "blob"; xhr.onload = function() { if (this.status == 200) {
Axios 中不同的 responseType 选项
m0_58462450的博客
01-26 1742
这些选项允许您指定服务器响应的预期数据类型，从而使您能够在应用程序中适当地处理响应。例如，当下载图像时，您可能会使用。，而在获取 JSON 数据时，则会使用默认的。选择取决于您正在处理的数据类型。Axios 中不同的。
Axios的不同responseType的使用场景
weixin_40243502的博客
11-07 1281
应用场景：用于将响应数据解析为 JSON 对象，适用于REST API和Web服务的调用。应用场景：用于接收二进制数据，通常是文件下载或处理图片、音频、视频等二进制数据的情况。应用场景：用于将响应数据解析为 HTML 文档对象，适用于获取和操作HTML文档的情况。应用场景：用于处理响应数据流，适用于大文件下载或需要逐行处理数据的情况。应用场景：用于将响应数据解析为纯文本，适用于文本内容的获取。类似，用于接收二进制数据，但通常用于文件下载等场景。一、arraybuffer。三、document。
vue axios(获取文件流乱码)设置返回值类型responseType:‘blob‘无效
08-12 7504
一、需求 vue项目，要求通过接口获取第三方平台传输的文件流，无需下载，获取后转成文件自动上传到当前平台媒资库。 二、开发过程 经过百度，找到了将文件转换成blob文件流格式，再将blob转换成file文件 let blob = new Blob([data]);//data是文件流(字符串格式，此时还没有意识到出现了乱码问题) let file = new File([blob], row[1], {type:"audio/mpeg"}); 整合到自己代码中，因为设置了responseType: “bl
axios按post请求Content-Type: x-www-form-urlencoded
07-13
你可以使用axios发送POST请求并设置Content-Type为x-www-form-urlencoded，以下是一个示例代码： ```javascript import axios from 'axios'; import qs from 'qs'; const postData = { name: 'John', age: 25 };...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值