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

最新推荐文章于 2024-04-03 12:21:51 发布
最新推荐文章于 2024-04-03 12:21:51 发布
阅读量226 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 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下载二进制流图片操作
01-21
1、应项目要求，后台返回二进制流，而且乱码 2、红色为必须 this.$axios.post('/fishweb/agent/downLoad',this.stringify({filename:'qrCode.jpg'}), { responseType: 'arraybuffer' //指定返回数据的格式为blob }).then((res) => { var src=[removed]+ btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte)
vue 后端返回图片乱码处理方法
老张头的博客
11-19 1968
vue 后端返回图片前端通过base64解析图片 渲染图片
Vue 读取后台二进制文件流转为图片显示，真服了
最新发布
m0_57077948的博客
04-03 1093
url: ‘请求的接口’,method: ‘get’, // get请求，post改为postparams: { // 这是提交的参数，如果是post 的就是 data// 返回的文件流数据// 将他转化为路径this.mapSrc = url // 将转换出来的路径赋值给变量，其实和上一步结合就可以})到这里就拿到了blob流转换成的文件路径然后就简单了，把这个转换出来的路劲赋值到需要展示的 img标签就可以了。
vue3+axios：图片链接转换成二进制文件流后并提交服务器
前端、python爱好者
01-05 4447
1、使用Image类创建一个新的图片。 2、将图片转换成base64。 3、将base64图片使用File类转换成二进制文件流 4、将二进制文件流使用 FormData类转换成binary类型提交服务器。
Vue前端处理blob二进制对象图片的方法
weixin_69117911的博客
11-06 6177
Vue处理blob类型
vue 后端返回二进制流-前端通过blob对象下载文件-图片
路虽远行则将至，事虽难做则必成。
10-18 2952
在实际开发中我们经常会遇见下载文件的场景，比如下载合同，下载文件下载文件有2种方式，一种是后端返回二进制流，前端通过blob对象接受根据不同类型下载还有一种把地址直接在浏览器新窗口打开浏览器打开pdf可以预览和下载，其他文件直接下载但不管是那种方式，原理都是一样的只是取决于谁来执行转化代码。
vue将图片链接、本地图片转为二进制文件流
weixin_44575130的博客
07-26 7159
vue将图片链接转为二进制文件流 应用场景：用户修改图片后会覆盖以前上传的图片，需将以前的的图片转为文件流与修改的图片一起上传 1.需先将图片链接转为Base64 imageUrlToBase64(imageUrl) { let image = new Image() // 一定要设置为let，不然图片不显示 image.setAttribute('crossOrigin', 'anonymous') // 解决跨域问题 image.src = imageUrl +"&v=" + Ma
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中后端做Excel导出功能返回数据流前端的处理操作
10-14
在Vue项目中，当后端实现Excel导出功能并返回数据流时，前端需要进行相应的处理以将数据转化为可下载的Excel文件。本篇将详细解释这个过程。 首先，后端通常会通过HTTP响应返回一个Blob对象，Blob是Binary Large ...
vue解析后端返回的二维码图片数据流
01-07
尝试用二进制大对象Blob解析，然后生成图片的URL，代码如下： // QRCode 为后端接口返回的图片数据流 const blob = new Blob([QRCode]) const url = window.URL.createObjectURL(blob) 但是把生成的URL链入img的src...
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
10-15
在Vue.js应用中，使用axios库来实现POST方式获取二进制流并下载文件是一个常见的需求，特别是当需要从服务器获取如Excel、PDF等特定格式的文件时。本篇文章将详细解析这一过程，并提供相关代码实例。 首先，我们来...
vue-以文件流-blob-的形式-下载-导出文件操作
10-14
在Vue项目中，有时我们需要实现从服务器下载或导出文件，特别是当服务器返回的是文件流时，需要特别处理。以下将详细介绍如何以文件流（Blob）的形式在Vue中下载和导出文件。 首先，确定服务器返回的数据类型至关...
vue2文件流下载成功后文件格式错误、打不开、内容缺失
Salt_NaCl的博客
02-14 5828
文档流问题
解决前端二进制流下载的文件（例如：excel）打不开的问题
weixin_48674314的博客
09-27 2584
解决前端二进制流下载的文件（例如：excel）打不开的问题、applicationvnd.openxmlformatsofficedocument.spreadsheetml.sheet；charset=utf-8
vue下载二进制流图片
lilongwei4321的博客
09-21 8712
1、应项目要求，后台返回二进制流，而且乱码 2、红色为必须 this.$axios.post('/fishweb/agent/downLoad',this.stringify({filename:'qrCode.jpg'}), { responseType: 'arraybuffer' //指定返回数据的格式为blob }).then((res) =&...
vue图片压缩成bse64转二进制流，并且更改文件名
xiaokangna的博客
08-07 792
【代码】vue图片压缩成bse64转二进制流，并且更改文件名。
vue二进制图片文件流下载
Dawnchen1的博客
02-04 1058
vue二进制图片/文件流下载 问题：后台返回二进制文件，直接控制台打印时乱码的。 解决方式： download(params) { this.$request({ url: baseUrl + '/fbsfd_nw_transaction/base/download', method: 'post', data:params , responseType: 'arraybuffer' }).then(res =>
超好用-后端返回图片乱码Vue前端的处理方式
二三的博客
03-08 3692
vue处理后端图片乱码问题 后端返回的图片信息是乱码的情况时，前端如何将乱码处理成图片 后端返回的信息如下图： 这是个jpeg格式的二进制流，不是常见的base64，所以需要在前端做一个处理。 state.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}` 将imgUrl的值放入img标签
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、付费专栏及课程。

余额充值