axios获得文件流，转为blob，出现部分文件乱码问题解决思路

最新推荐文章于 2024-06-12 14:06:07 发布
最新推荐文章于 2024-06-12 14:06:07 发布
阅读量3.1k 收藏 2
点赞数 1
分类专栏： vue学习 文章标签： javascript http vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42936434/article/details/109536576
版权
一、 什么是blob？

blob对象表示一个不可变、原始数据的类文件对象。blob文档
Blob表示的不一定是JavaScript原生格式的数据。
File接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。
Blob()构造函数返回一个新的Blob对象。blob的内容由参数数组中给出的值的串联组成。

二、前后端如何进行文件传输？

前后端分离，文件是通过文件流的形式进行传输的，前端通过axios请求后端接口，得到的响应数据是一串字符串。
js中有个Blob对象,一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。
所以，前端可以通过创建blob去接收文件流

三、预览pdf出现乱码

问题： 使用blob对象去预览pdf，大部分文件可以正常预览，少部分出现乱码，查阅资料发现要加语句responseType: 'blob'， 但主要的问题是功能能正常使用，少部分出现问题。通过问后端，后端说他那边没有问题，那问题是不是出现在文件上？然而文件并没有问题，是文件大小的原因嘛？通过验证发现文件大小更大的都能正常使用。
于是，开始阅读前端代码：
在这里插入图片描述
axioas能正常发出请求并得到响应结果，我将响应结果打印出来，发现返回结果是正确的，仔细一看，blob中的type与实际文档类型不一致。我是用后端提供的json数据进行判断的，刚好有几条没有后缀名。 于是，我以为是后端给的数据出现问题，然而…

在这里插入图片描述

四、从消息头中获取文件类型

原来，response的header里面包含了文件名以及文件类型，直接从里面拿就行了，这样就可以保证不出错了：
在这里插入图片描述

五、http中使用MIME类型表示响应数据类型
1、什么是Content-type

要知道什么是Content-Type，首先要了解什么是Internet Media Type。Internet Media Type即互联网媒体类型，也叫做MIME类型，使用两部分标识符来确定一个类型。在HTTP协议消息头中，使用Content-Type来表示具体请求中的媒体类型信息，意思就是说，Content-Type是Internet Media Type在HTTP协议中的别称。
content-type可以分为主类型、子类型和参数三大类
如：
multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式
参考链接

记录在实习过程中遇到的一些问题以及解决思路

weixin_42936434
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios二进制流下载文件乱码问题
salty_oy的博客
11-26 1081
一、后台 response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition", "attachment;filename=xxx.xx"); OutputStream os = response.getOutputStream(); wb.write(os); os.flush(); os.close(); 二、前端 axios.post(url,parameter,{ h..
java用流下载文件，文件名乱码解决办法（四）
m0_37635053的博客
01-08 3042
java用流下载文件 请看用流下载文件的常规方法： @RequestMapping("/fileDownLoad") public void fileDownLoad(HttpServletResponse response, @RequestParam("id") Long id) { log.info("……fileDownLoad………start………"); if ...
mysql : 结果乱码处理, blob乱码问题
阿咚do懂的博客
03-01 968
问题:在mysql数据库查看结果是非乱码,但是传到页面变成了 乱码 处理方案:使用mysql函数 CAST mysql函数 CAST 说明 Cast(字段名 as 转换的类型 )，其中类型可以为： CHAR[(N)] 字符型 DATE 日期型 DATETIME 日期和时间型 DECIMAL float型 SIGNED int TIME 时间型 处理乱码选用 CHAR 使用方式 CAST(字段 as char) ...
二进制文件流转化blob
最新发布
m0_56294200的博客
06-12 508
文件流转blob
axios 请求接口获取文件流数据导出数据到excel,解决乱码
weixin_33697898的博客
05-06 638
axios.get("URL",{ params:{ data1:data1, data2:data2 }, headers: { 'Content-Type': 'application/js...
axios 下载blob文件流乱码
LLCSL的博客
08-20 906
async handleExportExcel () { this.$axo.post({{api}}, data, { // 默认为json，blob文件导出需要改成blob responseType: 'blob' }) .then(response => { if (response && response.status === 200) { const data = response.data const b
前端下载文件流，文件流转blob对象下载
葫芦娃y的博客
12-05 1525
文件流转blob对象下载前端
使用axios，导出文件时，接口正常，返回乱码问题修复
ZoeLinJF的博客
04-29 1078
导出接口，点击接口是正常调用，请求方式和地址都没错。正常情况是直接下载该文档，但是返回结果是乱码（如下图）。 解决方法： – 修改请求配置 – 返回结果接收调整 import axios from 'axios'; import { getToken } from '@/utils/utils'; export function exportFile(url, params) { // 使...
vue-以文件流-blob-的形式-下载-导出文件操作
10-14
以下将详细介绍如何以文件流（Blob）的形式在Vue中下载和导出文件。 首先，确定服务器返回的数据类型至关重要。在发送HTTP请求时，我们需要设置`responseType`为`blob`，以便接收二进制大型对象（Blob）。这可以在...
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
01-19
vue-cli+axios实现附件上传下载记录： 上传： 这里用formData格式传递参数；请求成功后后台返回上传文件的对应信息。 重点是下载： ############## downloadfile(res) { var blob = new Blob([res.data], {...
vue+axios实现文件下载及vue中使用axios的实例
10-17
通常，用于下载的接口会返回文件流，`Content-Type` 设置为文件类型，如 `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` 对于 Excel 文件，`Content-Disposition` 设置为 `attachment;...
axios实现文件上传并获取进度
10-16
主要为大家详细介绍了axios实现文件上传并获取进度，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于axios方式的文件下载！！
11-07
通过axios下载文件，不跳转页面，可以添加其他参数进行验证。
vue+axios+blob下载二进制流文档乱码解决
qq_38019470的博客
04-05 2889
问题描述：vue项目，用axios请求后端接口获取文件二进制流下载文件打开乱码 1.首先请求接口，获取到下图的二进制结果 2.axios封装请求参数 let httpDefaultOpts = { method: 'download', url: options.url,//接口的地址 timeout: 60000, params: options...
js对后台数据库中blob类型的数据，进行二进制解码并解决中文乱码
weixin_47615289的博客
11-21 921
在 JavaScript 中，您可以使用 atob() 函数对后台发送的 Base64 编码的二进制数据进行解码。
关于后端二进制数据流转换blob对象(转化成前端可识别的图片)
Liw_J的博客
10-23 4771
前言：今天记录一下昨天调接口遇到的小问题。新项目当前我一个人做，登录页面里面有验证码这个环节。初始化页面时候调取一个get接口，后台返回一个二进制流的图片格式，console.log输出如下： 第一次碰到这种格式的数据，一时间还不太会处理，后来在技术群里面咨询了大佬，回答是，这是后端传回来的二进制流数据，需要转化成blob（中文意思:斑点）对象。项目使用的vue框架，百度搜了下具体可行的方法如下： 1、在这个请求的接口里面需要添加 请求类型为blob类型 2、在页面里面调用这个接口以后，.
axios请求接口后获取blob文件名
苏沐云的博客
02-16 2520
let name = res.headers["content-disposition"].split(';')[1].split('filename=')[1];
blob下载--返回数据乱码问题
前端
08-27 6855
blob下载返回数据乱码问题 之前介绍过下载，在使用blob方式进行下载的时候,遇到返回的数据为乱码 服务端需要设置为response.setContentType(“application/octet-stream”)，但是这个值不一定非设置成"application/octet-stream"，当下载文件类型不止一种时需要设置为该值，否则设置为对应的类型即可，例如： response.setContentType(“application/vnd.ms-excel;charset=utf-8”); 正常
js blob导出文件 文件下载 中文乱码的问题
XUANEER的博客
09-08 6965
项目场景： 后端解密文件以流的形式返回给前端， 前端需要读取流文件实现文件下载 问题描述： 下载含有中文的文件时，中文乱码 @Override const data = '测试下载文件\n' + 'wewewe\n'; const blob = new Blob([data], {type: 'text/plain'}); const blobUrl = URL.createObjectURL(blob
axios下载文件请求, responseType为blob时捕获后端错误问题
09-01
### 回答1： axios是一个基于Promise的HTTP客户端库，支持在浏览器和Node.js中发送HTTP请求。当使用axios下载文件时，如果需要指定响应的数据类型为blob，则可以使用responseType配置选项。 在使用responseType为blob时，如果后端出现错误，可以通过catch捕获错误信息并处理。例如： ```javascript axios({ method: 'get', url: '/download/file', responseType: 'blob' }).then((response) => { // 处理下载的文件 }).catch((error) => { // 处理捕获到的错误信息 }); ``` 在上述代码中，当后端出现错误时，会触发catch块中的代码，可以在这里处理错误信息，例如提示用户下载失败或重新尝试下载等操作。 ### 回答2： 在使用axios进行文件下载请求时，我们可以通过设置responseType为blob来获取文件的二进制数据。然而，当后端返回的数据不是预期的文件类型时，可能会出现错误。为了捕获后端错误问题，我们可以使用try-catch语句来处理异常。 首先，我们需要设置axios的响应拦截器，用于在请求返回时捕获错误。在拦截器中，我们将判断返回数据的类型，如果不是预期的blob类型，则抛出一个自定义的错误。 ```javascript axios.interceptors.response.use( response => { if (response.config.responseType === 'blob' && response.data.type !== 'application/octet-stream') { throw new Error('后端返回数据异常') } return response }, error => { return Promise.reject(error) } ) ``` 接下来，在发起文件下载请求时，我们可以使用try-catch语句来包裹axios请求，并处理可能抛出的错误。 ```javascript try { const response = await axios.get('/download', { responseType: 'blob' }) // 文件下载成功的逻辑处理 } catch (error) { // 捕获并处理后端错误 console.error(error.message) } ``` 这样，当后端返回的数据不是预期的blob类型时，我们就可以捕获到错误，并进行相应的处理，例如输出错误信息到控制台。 注意，由于axios是基于Promise的异步请求库，我们使用了async/await来进行异步处理。当然，你也可以使用.then()来处理异步请求。以上代码只是一个简单示例，你可以根据自己的需求进行进一步的优化和处理。 ### 回答3： 在使用axios进行文件下载请求时，可以设置responseType为blob来获取二进制数据作为响应。但是在这种情况下，由于后端错误的情况下，返回的响应数据类型可能依然是blob，而不是正常的json数据。因此，需要在前端代码中进行相应的处理来捕获后端错误。 首先，在axios请求中设置responseType为blob： ```javascript axios.get(url, { responseType: 'blob' }) ``` 之后，在返回的响应中，可以通过判断响应的Content-Type来确定响应数据类型。如果是对应的错误类型，则可以通过读取blob数据并进行相应的处理。 ```javascript axios.get(url, { responseType: 'blob' }).then(response => { const contentType = response.headers['content-type']; if (contentType === 'application/json') { // 正常情况 // 处理响应数据 } else { // 错误情况 response.blob().then(blobData => { // 处理错误数据 }); } }).catch(error => { // 请求错误 console.error(error); }); ``` 在错误情况下，使用response.blob()将blob数据转换为对应的Blob对象，并可以进行进一步的操作。比如，可以读取该Blob对象中的错误信息，并根据具体情况进行相应的处理，比如提示错误信息给用户或者进行其他的业务操作。 需要注意的是，设置responseType为blob时，后端返回的响应必须包含相应的Content-Type头部信息，以便前端能正确判断响应数据类型。否则，需要与后端进行沟通，确保正确返回对应的Content-Type信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值