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

fruge365

发布于 2025-12-15 10:30:04

1710

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

本文章是转载文章，原文章：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;
   });
 },

打印得到：

由此，图片可以正常显示

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-07-26，如有侵权请联系 cloudcommunity@tencent.com 删除

blob

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐