js接收到后台返回的数据是二进制流图片乱码

最新推荐文章于 2024-07-04 05:00:00 发布
最新推荐文章于 2024-07-04 05:00:00 发布
阅读量7.9k 收藏 3
点赞数
分类专栏： javascript基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/null_bugs/article/details/79620323
版权
本文主要探讨了在JavaScript中遇到从后台获取的二进制流数据导致图片显示为乱码的常见问题，并提供了相应的代码解决方案，旨在帮助开发者正确处理并显示二进制流图片。
摘要由CSDN通过智能技术生成

 处理二进制流显示的代码到回调里

最低0.47元/天 解锁文章
Null_Bugs
关注
专栏目录
Vue - 详细实现下载后端接口返回的二进制文件流，前端下载后端接口返回的文件流并自动保存到本地，支持任何格式的文件下载（从后端拿到二进制文件流数据，前端实现点击下载功能）
王佳斌
12-08 1万+
vue，vue文件流对象下载，vue下载二进制文件流，下载二进制文件，vue调用接口获取二进制文件流如何下载到本地，下载图片图像excel word pdf ppt文件，vue后端返回二进制流-前端通过对象下载文件-图片，vue实现文件下载功能，vue下载二进制文件对象实现下载文件的超详细教程，vue使用new Blob()实现不同类型的文件下载功能，vue请求后端接口得到一大堆乱码怎么将文件下载出来，前端vue使用下载流文件，vue获取后端的Blob文件流下载文件，vue通过blob下载流文件，vue下载
二进制数据和乱码的案例
weixin_43446193的博客
02-29 1640
二进制数据和乱码的案例 为了让读者更直观地了解二进制数据和乱码，下面通过一个案例来演示。 (1). 在E:\Liu\node.js学习目录下创建目录chapter05。 (2). 在chapter05目录下创建记事本文件test.xt,，如图所示。 在test.txt文件中添加内容“hello 我是中文”。 (3) . 在chapter05目录下创建文件demo5-1.js，在demo5-1.j...
js对后台数据库中blob类型的数据，进行二进制解码并解决中文乱码
weixin_47615289的博客
11-21 948
在 JavaScript 中，您可以使用 atob() 函数对后台发送的 Base64 编码的二进制数据进行解码。
java后台怎么返回blob格式的文件流
最新发布
Andrew_Chenwq的博客
07-04 1541
简介：大家好，我是程序员枫哥，🌟一线互联网的IT民工、📝资深面试官、🌹Java跳槽网创始人。拥有多年一线研发经验，曾就职过科大讯飞、美团网、平安等公司。在上海有自己小伙伴组建的副业团队，目前业余时间专注Java技术分享，春招/秋招/社招/跳槽，一对一学习辅助，项目接活开发。🌈更多学习内容， 欢迎👏关注👀【文末】微信公众号：IT枫斗者🌟🌟程序员找工作，就上Java跳槽网：www.javatiaocao.com。
js 解决获取图片乱码 将 Arraybuffer 转换为 base64 的两种方式
HHH917的博客
04-24 4727
请求 axios 添加 responseType: ‘arraybuffer’ axios .get('/Base/captcha?' + Math.random(), {}, { responseType: 'arraybuffer' }) Arraybuffer 转换为 base64 方式一 window.btoa (已弃用) const base64Str = 'data:image/png;base64,' + btoa( new Uint8Arr
js 二进制流文件下载导出（接口返回二进制流）乱码处理
hzxOnlineOk的博客
09-06 1万+
平时在前端下载文件有两种方式，一种是后台提供一个 URL，然后用 window.open(URL) 下载，另一种就是后台直接返回文件的二进制内容，然后前端转化一下再下载。 由于第一种方式比较简单，在此不做探讨。本文主要讲解一下第二种方式怎么实现。 Blob、ajax(axios) mdn 上是这样介绍 Blob 的： Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据 具体使用方法 axios({ method: 'post',..
前端实现下载文件（处理后端返回的二进制流）
http____的博客
10-01 2136
Blob代表了一中不变的、原数据的类文件对象，它们可以当作text或者binary data或者转换为可读取的流(ReadableStream)。所以它的方法可以被用来处理数据。正常情况下axios 不会处理二进制数据，即会去接收但是不会去处理，需要在请求得适合设置。点击按钮向后端请求数据，实现文件下载。// 模拟在按钮上实现一次鼠标点击。// 允许用户在客户端上保存文件。// 释放 URL 对象。
axios接收后台响应的二进制文件
Mr_yu816的博客
10-09 1885
1、发送请求的时候，把响应类型responseType的值修改为blob axios({ url: 'xxxx', // 请求路径 method: 'post', // 请求方式 data: { id: 0 // 传给后台的参数 }, responseType: 'blob'
【vue】后端接口返回了在预览中展示的png（二进制流）如何展示在前端页面？
栀妹儿的炼丹炉
03-09 6204
调用后端接口发现返回的数据是个png图片，在预览中可以查看： 但是无法打印，打印出来是一堆乱码，如下图所示： 那你就是得到了一个二进制流的图片，你需要转换！ 1、接口页：需要加上blob类型说明responseType: 'blob' export function getHistoryImage(id) { return request({ url: liuqiangBase+'/accBaseInfo/image', method: 'get', params: id,
前端处理后台传过来的二进制流进行下载，并处理乱码
noResults的博客
11-16 1万+
附上代码及注释 //注意请求的时候要加上{responseType:'blob'}参数 this.$axios.post("/api/xxx/xxx/xxx",this.$qs.stringify({range:0,}),{responseType:'blob'}).then(msg=>{ console.log(msg.data) //打...
前端处理后台返回二进制流乱码图片
热门推荐
lbn2676043895的博客
06-01 2万+
后台返回二进制流乱码图片2018年04月09日 15:19:24阅读数：195 axios.get('/url', { responseType: 'arraybuffer' }).then(response => { return 'data:image/png;base64,' + btoa( new Uint8Array(resp...
前端处理后端图片流乱码问题并解决axios返回值问题
siyi_blog的博客
12-10 1639
前端处理后端图片流乱码问题并解决axios返回值问题 this.dealImg(url).then((data)=>{ // data就是dealImg的返回结果，也就是.then里面取得的data，拿到值后就可以在这里处理了 console.log(data); }) dealImg(url) { // 处理后端传过来的图片流乱码问题 if (url) { ...
谷歌浏览器调试界面，返回数据预览(preview)项，中文乱码
Dreamaple
09-11 1万+
本人所用谷歌浏览器版本v70.0+ 设置响应头 //c#代码 context.Response.ContentType = "application/json"; 设置好后，中文显示正常
超好用-后端返回图片乱码Vue前端的处理方式
二三的博客
03-08 3873
vue处理后端图片乱码问题 后端返回的图片信息是乱码的情况时，前端如何将乱码处理成图片 后端返回的信息如下图： 这是个jpeg格式的二进制流，不是常见的base64，所以需要在前端做一个处理。 state.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}` 将imgUrl的值放入img标签
jquery解析图片地址字符串中文乱码的解决方法
本杰明的博客
06-18 3820
-当我们需要解析图片地址字符串时，如果我们用jquery直接获取src中的地址时，输入以下代码： alert($('.img_class').attr('src')); -输出为： -解决方法：加上decodeURL(para)方法，如下所示 alert(decodeURL($('.img_class').attr('src')）); 此时再次渲染页面，输出为： 可以看到url中的中文正常显示~
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值