当前位置:首页 » 《随便一记》 » 正文

Vue前端渲染blob二进制对象图片的方法

7 人参与  2024年04月28日 17:11  分类 : 《随便一记》  评论

点击全文阅读


近期做开发,联调接口。接口返回的是一张图片,是对二进制图片处理并渲染,特此记录一下。

本文章是转载文章,原文章:Vue前端处理blob二进制对象图片的方法

接口response是下图

在这里插入图片描述
显然,获取到的是一堆乱码,前端需要将其解析出来,百度之后发现解析二进制文档流的写法如下:
1.定义接口的时候加上responseType

export function ImgTest() {  return request1({    url: "/test",    method: "get",    responseType: "blob",  });}

methods中,imgUrl是接收的模型

 ImgTest() {   ImgTest().then((res) => {     const url = window.URL.createObjectURL(new Blob([res]));     console.log(url, "工作流图片");     this.imgUrl = url;   }); },

打印得到:

在这里插入图片描述
由此,图片可以正常显示

在这里插入图片描述


点击全文阅读


本文链接:http://zhangshiyu.com/post/101589.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1