后台返回二进制流乱码图片

最新推荐文章于 2024-06-20 11:11:17 发布
原创 最新推荐文章于 2024-06-20 11:11:17 发布 · 5.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种利用Axios从指定URL获取图片的方法，并将其转换为Base64编码格式，便于在网络应用中直接展示图片内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

axios.get('/url', {
responseType: 'arraybuffer'
}).then(response => {
return 'data:image/png;base64,' + btoa(
new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
)
}).then(data => {
this.img = data
})
axios二进制流下载文件乱码问题
salty_oy的博客
11-26 1237
一、后台 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..
前端下载二进制流文件
weixin_56747270的博客
10-14 2064
平时在前端下载文件有两种方式，一种是后台提供一个 URL，然后用下载，另一种就是后台直接返回文件的二进制内容，然后前端转化一下再下载。由于第一种方式比较简单，在此不做探讨。本文主要讲解一下第二种方式怎么实现。
后端返回图片格式乱码
weixin_60523038的博客
06-06 687
(new Uint8Array(response)-----这里的response替换成为自己的乱码内容所对应的是后端返回的哪一个具体位置。接口上面的responseType设置成为buffer即可。
【通用】前端处理后台返回的图片控制台输出是乱码
Qxn530的博客
11-04 1738
前端处理后台返回的图片控制台输出是乱码
Vue和axios解决后端传输过来的图片乱码问题
suwenyang_blogs
03-14 1268
问题： 显示乱码： 解决代码： refreshCaptcha(){ let that=this axios.get('你的api',{ responseType: 'arraybuffer', }) .then(response => { return 'data:image/png;base64,' + btoa( new Uint8Array(re
超好用-后端返回图片乱码Vue前端的处理方式
二三的博客
03-08 4178
vue处理后端图片乱码问题 后端返回的图片信息是乱码的情况时，前端如何将乱码处理成图片 后端返回的信息如下图： 这是个jpeg格式的二进制流，不是常见的base64，所以需要在前端做一个处理。 state.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}` 将imgUrl的值放入img标签
开发uni的H5项目记实--后端返回图片流（乱码）该怎么办
a1134503682的博客
05-16 1256
后端返回图片流（乱码）该怎么处理才能正常展示出来
vue下载二进制流图片操作
01-21
1、应项目要求，后台返回二进制流，而且乱码 2、红色为必须 this.$axios.post('/fishweb/agent/downLoad',this.stringify({filename:'qrCode.jpg'}), { responseType: 'arraybuffer' //指定返回数据的格式为blob...
JavaScript读二进制文件并用ajax传输二进制流的方法
10-21
在JavaScript中，处理二进制文件并使用Ajax传输二进制流是一项常见的任务，尤其是在进行文件上传或数据传输时。由于浏览器之间的差异，实现这一功能需要考虑不同的API和兼容性问题。以下是一份详细的指南，涵盖了...
h5如何上传文件二进制流_前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输...
weixin_42396932的博客
02-15 1418
HTML5中的Blob对象只是二进制数据的容器，本身并不能操作二进制，故本篇将对其操作对象FileReader进行介绍。FileReaderFileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件...
【验证码乱码】前端处理后端传过来的图片乱码问题
weixin_49006730的博客
12-15 1591
【验证码乱码】前端处理后端传过来的图片乱码问题
图片需要调用接口获取，如何将返回的图片乱码转为真实图片
CS饭 的博客
04-12 1527
输出返回的图片数据，显示乱码（ArrayBuffer 二进制流） 若要正常展示图片，需要对其进行转换：
.ajax图片输出流乱码,ajax二进制流乱码图片解决方法(示例代码)
weixin_29000417的博客
08-05 570
仅供自己参考在请求成功的地方 添加以下代码：var blob=new Blob();blob=this.response;既然二进制数据拿到了，那么要把它放在一个 html标签中，并且应该是img标签 那么：代码应该是var img = document.createElement("img");img.src = window.URL.createObjectURL(blob); //有问题，...
接口返回图片或视频
song1998s的博客
06-20 553
【代码】接口返回图片或视频。
js ajax获取图片验证码乱码,用js来解决ajax读取页面乱码
weixin_42110362的博客
08-07 572
例子：rsajax.js：var http_request = false;function makePOSTRequest(url, parameters) {http_request = false;if (window.XMLHttpRequest) {http_request = new XMLHttpRequest();if (http_request.overrideMimeType)...
前端处理后台返回二进制流乱码图片
热门推荐
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...
ajax二进制流乱码图片解决方法
weixin_46020146的博客
08-30 256
ajax二进制流乱码图片解决方法
EasyExcel后台返回流，前台乱码问题
最新发布
05-30
<think>嗯，用户在使用EasyExcel时遇到了后台返回流导致前台乱码的问题。首先，我需要理解这个问题可能的原因。根据之前的引用，比如引用[1]提到服务器返回的是ZIP压缩包格式的Office文档，而前端可能没有正确处理这种流数据，导致显示乱码。同样，引用[2]中的前端代码使用了正确的方法处理数据流，比如设置responseType为'blob'，这可能是一个关键点。用户的问题可能出在以下几个方面：后端没有正确设置响应头，比如Content-Type或Content-Disposition，或者前端没有以二进制流的形式接收数据，导致浏览器尝试解析为文本，出现乱码。另外，可能没有使用正确的工具库处理Blob数据，比如在Vue中使用axios时，需要配置responseType为'blob'。接下来，我需要考虑解决方案。首先，检查后端的响应头是否正确设置，确保Content-Type是application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，并且Content-Disposition包含filename。然后，前端在请求时需要指定responseType为'blob'，接收到数据后使用Blob对象和URL.createObjectURL来生成下载链接，避免直接处理文本数据。另外，用户提到的EasyExcel是阿里的库，可能需要确认后端是否正确使用EasyExcel的API来写入输出流，避免中间有其他的数据处理导致流不完整。同时，前端是否有编码问题，比如没有正确解码，但通常二进制流不需要解码，直接作为Blob处理即可。可能还需要考虑网络中间件，比如网关或拦截器，是否修改了响应头或内容。例如，某些安全设置可能会更改Content-Type，导致浏览器无法识别。此外，跨域请求时，服务器是否正确配置了CORS头部，允许前端接收二进制数据。最后，综合这些可能性，整理出步骤清晰的解决方案，涵盖前后端的配置和代码示例，帮助用户逐步排查和解决问题。</think>### EasyExcel后台返回流导致前台乱码的解决方案 #### 1. **问题定位** 前台出现乱码通常是因为： - 后端未正确设置响应头，导致浏览器将二进制流误解析为文本[^1] - 前端未以二进制格式接收数据流 --- #### 2. **后端关键配置** ```java // 设置响应头 response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); response.setCharacterEncoding("utf-8"); response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "UTF-8") + ".xlsx"); // 使用EasyExcel写入流（需确保流未提前关闭） EasyExcel.write(response.getOutputStream(), ExcelModel.class).sheet("Sheet1").doWrite(dataList); ``` *注意：不可在写入流前调用`response.getWriter()`或操作其他输出流[^3]* --- #### 3. **前端处理方案（以Vue+axios为例）** ```javascript axios({ method: 'get', url: '/export', responseType: 'blob' // 必须声明响应类型为二进制流[^2] }).then(res => { const blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}); const downloadUrl = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = downloadUrl; a.download = 'filename.xlsx'; a.click(); window.URL.revokeObjectURL(downloadUrl); }); ``` --- #### 4. **常见问题排查表 | 现象 | 可能原因 | 解决方法 | |-------|---------|---------| | 下载文件名为乱码 | 未使用URL编码文件名 | 添加`URLEncoder.encode(filename, "UTF-8")`[^3] | | 打开文件提示损坏 | 流被重复使用/提前关闭 | 检查是否在流操作后调用`flush()`而非`close()` | | 浏览器直接显示乱码 | 未设置`responseType: 'blob'` | 确认前端请求配置 | ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值