vue2 图片下载，后端返回二进制流，前端处理操作

最新推荐文章于 2024-02-23 09:43:00 发布
最新推荐文章于 2024-02-23 09:43:00 发布
阅读量221 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ku_bi_ri_zhi/article/details/132479019
版权

 首先确定是否使用的是axios，如果是接着操作，如果不是那就重新百度一下把。

再去请求函数里面看，原来是这样写的，在后面加上responseType:'blob'

 加上了之后找到我们调用接口的函数那里，打印一下我们的response

 

 出现这样是错误的

 返回代码加上async和await

 

 这段就是后端返回的二进制流，显示这段乱码就显示res正确了，最后加上以下代码就可以啦

 

ku_bi_ri_zhi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 读取后台二进制文件流转为图片显示，真服了
m0_57077948的博客
04-03 1063
url: ‘请求的接口’,method: ‘get’, // get请求，post改为postparams: { // 这是提交的参数，如果是post 的就是 data// 返回的文件流数据// 将他转化为路径this.mapSrc = url // 将转换出来的路径赋值给变量，其实和上一步结合就可以})到这里就拿到了blob流转换成的文件路径然后就简单了，把这个转换出来的路劲赋值到需要展示的 img标签就可以了。
vue 后端返回图片乱码处理方法
老张头的博客
11-19 1965
vue 后端返回图片前端通过base64解析图片 渲染图片
前端如何处理后端返回的二进制数据
最新发布
m0_63047774的博客
02-23 558
前端如何处理后端返回的图片数据
Vue前端处理blob二进制对象图片的方法
weixin_69117911的博客
11-06 6164
Vue处理blob类型
vue 后端返回二进制流-前端通过blob对象下载文件-图片
路虽远行则将至，事虽难做则必成。
10-18 2924
在实际开发中我们经常会遇见下载文件的场景，比如下载合同，下载文件下载文件有2种方式，一种是后端返回二进制流，前端通过blob对象接受根据不同类型下载还有一种把地址直接在浏览器新窗口打开浏览器打开pdf可以预览和下载，其他文件直接下载但不管是那种方式，原理都是一样的只是取决于谁来执行转化代码。
vue2文件流下载成功后文件格式错误、打不开、内容缺失
Salt_NaCl的博客
02-14 5816
文档流问题
解决前端二进制流下载的文件（例如：excel）打不开的问题
weixin_48674314的博客
09-27 2532
解决前端二进制流下载的文件（例如：excel）打不开的问题、applicationvnd.openxmlformatsofficedocument.spreadsheetml.sheet；charset=utf-8
vue img src加载图片二进制问题记录
热门推荐
u010227042的博客
11-05 1万+
此 地址请求 http://xx.xx.xx.xx:xxxx/xx/.../xx/downLoadDoc?docId=xxxxx&access_token=xxxxx 返回的png二进制流。如下： �PNG IHDR M )�l��IDATx���d������d�1����������Ld.3I$�L�$Ɍ$�dL2��%�L�%I"I��L�Ld�I"I��������...
Vue + antd组件 实现后端返回二进制流导出Excel模版与上传Excel模版给后端
01-03
下载模版 上传更新 methods: { beforeUpload(file) { let Res = this.checkedList.map((itemm, indexx) => { this.newJointObj.forEach((item, index) => { if (item[Object.keys(item)] === itemm) { this....
vue解析后端返回的二维码图片数据流
01-07
尝试用二进制大对象Blob解析，然后生成图片的URL，代码如下： // QRCode 为后端接口返回的图片数据流 const blob = new Blob([QRCode]) const url = window.URL.createObjectURL(blob) 但是把生成的URL链入img的src...
二进制数据转换成图片
06-19
描述二进制转换成图片的方法
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
10-15
主要介绍了在vue中使用axios实现post方式获取二进制流下载文件的相关资料,需要的朋友可以参考下
vue 解决data中定义图片相对路径页面不显示的问题
10-14
主要介绍了vue 解决data中定义图片相对路径页面不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端将浏览器端麦克风语音流传输给java后端
06-11
前端将浏览器端麦克风语音流传输给java后端
后端返回二进制流，前端处理二进制文件流，实现预览图片以及PDF
hello word
02-22 4494
转成的本地预览地址赋值给Img的src即可展示图片。方法打开转成本地预览地址即可预览PDF,如下图。转成本地预览地址， 在通过。定义接口：并设置相应类型。1、首先预览PDF需要。，不能预览，会直接下载。
开发uni的H5项目记实--后端返回图片流（乱码）该怎么办
a1134503682的博客
05-16 1100
后端返回图片流（乱码）该怎么处理才能正常展示出来
前端处理后端返回的二进制流文件
Anony_me的博客
05-24 6936
前端处理后端返回的二进制流文件 首先收到后台的数据 由于项目文件服务器加密原因，只能通过后台接口获取二进制流， 需求： 需要点击一个 按钮 ，实现文件下载 ，而后端返回的数据为二进制流数据。 原因： 前端收到后台的数据，前端收到后台接口获取的二进制流，前端实现文件下载。前端页面的编码格式和服务端编码格式不同，正如此时，服务端返回的是 blob格式的数据，而我们使用的是 非 blob格式去解析，所以产生了乱码。 1.这一步非常重要！！！在请求接口时要设置responseType为blob。 要想处理这段乱码
后端返回图片二进制流，前端处理
会飞的咕咕鱼的博客
01-08 1万+
//vue中 this.$http.get("url....", { responseType: "arraybuffer", }).then(function (response) { //将从后台获取的图片流进行转换 return 'data:image/png;base64,' + btoa( new Uint8Array(response.data).reduce((data, byte) =&...
vue前端如何下载后端返回二进制文档流
04-13
您可以使用浏览器提供的 Blob 对象和 URL.createObjectURL() 方法，将二进制文档流转为 URL，并通过创建 A 标签并模拟点击下载的方式实现前端下载。具体实现步骤可以参考以下代码示例： ``` // backendResponse 是后端返回的二进制文档流数据 // 转为 Blob 对象 const blob = new Blob([backendResponse], { type: 'application/octet-stream' }) // 将 Blob 对象转为 URL const url = URL.createObjectURL(blob) // 创建 A 标签并设置下载属性，模拟点击下载 const a = document.createElement('a') a.href = url a.download = '文件名' document.body.appendChild(a) a.click() document.body.removeChild(a) // 释放 URL 对象占用的内存 URL.revokeObjectURL(url) ``` 以上代码是基于 Vue 框架的实现方式，您可以根据具体的前端框架和项目需求进行适当的修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值