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

news2024/11/24 12:10:48

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

本文章是转载文章,原文章: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://www.coloradmin.cn/o/795109.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HEVC网络适配层介绍

h265 的分层结构 分层结构的目的 ○ 网络类型多种多样,不同的网络环境具有不同的特性,压缩视频在其中进行传输必然会受到影响;比如不同网络的 MTU 有所不同; ○ 不同的应用场景对视频有不同的需求,视频业务会喜用不…

Llama 2 来袭 - 在 Hugging Face 上玩转它

🤗 宝子们可以戳 阅读原文 查看文中所有的外部链接哟! 引言 今天,Meta 发布了 Llama 2,其包含了一系列最先进的开放大语言模型,我们很高兴能够将其全面集成入 Hugging Face,并全力支持其发布。Llama 2 的社…

Sentinel Dashboard集成Nacos

1.前言 当项目上Sentinel Dashboard做流量监控的时候,我们可以通过Sentinel控制台修改限流配置,但当我们使用Nacos作为配置中心动态配置流控规则的时候,问题就来了。 首先我们要明白,Sentinel Dashboard的配置是从机器的内存中加…

go学习 3、基础数据类型

3、基础数据类型 基础数据类型:数字、字符串、布尔型复合类型:数组、结构体引用类型:指针、切片、字典、函数、通道接口类型 3.1 整型 有符号、无符号 int8/int16/int32/int64 uint8/uint16/uint32/units 64 Unicode字符rune类型是和int32…

R语言无法调用stats.dll的问题解决方案[补充]

写在前面 在去年10月份,出过一起关于R语言无法调用stats.dll的问题解决方案,今天(你看到后是昨天)不知道为什么,安装包,一直安装不了,真的是炸裂了。后面再次把R与Rstuido升级。说实话,我是真不…

整套停车位地磁检测方案出售,主控使用stm32驱动nb-iot模块bc95数据上传远程云服务器。

地磁车辆检测器,是车辆本身含有的铁磁物质会对车辆存在区域的地磁信号产生影响,使车辆存在区域的地球磁力线发生弯曲。当车辆经过传感器附近,传感器能够灵敏感知到信号的变化,经信号分析就可以得到检测目标的相关信息。 朋友创业…

安装github中的存储库作为Python包

第一步,安装git 安装教程:https://zhuanlan.zhihu.com/p/114068278 第二步,在github上复制该库的链接 第三步,使用命令行一键下载并安装包 pip install "githttps://github.com/openai/CLIP.git"如果当pip install…

笔记本充满电后,充电器可以长期不拔,会议安全隐患吗?

笔记本充满电后,一直插着不拔 1.建议人在身边可以暂时不拔,偶尔还是要使用电池当笔记本电池充满之后,电脑会自动使用电源供电,不会使用电池供电 2.笔记本电池都带有电池保护机制,在电池充满电后会自动停止充电 3.现在…

RNN架构解析——认识RNN模型

目录 RNN模型作用分类按照输入和输出的结构进行分类按照RNN的内部构造进行分类 RNN模型 RNN单层网络结构 作用 分类 按照输入和输出的结构进行分类 按照RNN的内部构造进行分类

Ftp和UDP的区别之如何加速文件传输

FTP(文件传输协议)是一种传输大文件的老方法,它的速度慢,而且容易受到网络环境的影响。在当今这个文件越来越大,项目交付时间越来越紧,工作分布在全球各地的时代,有没有办法让 FTP 加速呢&#…

JS学习第二部分

在前面,第一章节 ,学了JS的基本语法和一些常用的用法。在第二章节, 学了DOM,就是节点信息,教我们怎么在JS里面获取HTML的标签。接着,我们学习第三章节,怎么在JS里面对HTML的css样式进行操作。 …

3ds MAX NURBS曲线绘制鼠标

先引用一段大佬的话,解释为什么除了样条线还有这种曲线 NURBS是有理B-splines曲线https://www.zhihu.com/search?q%E6%9C%89%E7%90%86B-splines%E6%9B%B2%E7%BA%BF&search_sourceEntity&hybrid_search_sourceEntity&hybrid_search_extra%7B%22sourceT…

<Postman>Postman接口测试以及使用案例

说明:现在所有的系统都有登录token设置; 所以需要先进行登录,获取两个token; 关于token和refresh token 传统的认证方式一般采用cookie/session来实现,这是我们的出发点。 1.为什么选用token而不选用cookie/session…

OSI模型简介及socket,tcp,http三者之间的区别和原理

1.OSI模型简介(七层网络模型) OSI 模型(Open System Interconnection model):一个由国际标准化组织提出的概念模型,试图提供一个使各种不同的计算机和网络在世界范围内实现互联的标准框架。 它将计算机网络体系结构划分为七层,每…

spring 存储对象 + 获取对象

前言 本篇在spring中如何使用五大类注释与方法注释将对象加入IOC容器中,了解如何使用注释来获取容器中的Bean对象,如有错误,请在评论区指正,让我们一起交流,共同进步! 文章目录 前言1.通过注释将类加入IoC…

【C++ 重要知识点总结】自定义类型-类和结构体

类 类的基本特性 数据抽象和封装继承多态 1 类的构成——抽象 概念 数据抽象是一种依赖于接口和实现的分离的编程技术。类的接口包括用户所能执行的操作;类的实现包括类的数据成员、负责接口实现的函数体以及定义类所需要的的各种私有函数。封装实现了类的接口和实…

645. 错误的集合

645. 错误的集合 class Solution { public static int[] findErrorNums(int[] nums) {Arrays.sort(nums);int dup-1;int miss1;for (int i 1; i < nums.length; i) {if(nums[i]nums[i-1]){dupnums[i];}if(nums[i]-nums[i-1]>1){missnums[i]-1;}}return new int[]{dup,…

Vmware vSphere 5.0系列

Vmware vSphere 5.0 我们都用过 vmware workstation 这款产品&#xff0c;可以使我们安装很多虚拟机&#xff0c;但是 vmware 的核心产品远非局限于 workstation。 vSphere 是 VMware 推出的基于云的新一代数据中心虚拟化套件&#xff0c;提供了虚拟化基础架构、高可用性、集…

Tesseract开源的OCR工具及python pytesseract安装使用

一 、介绍 Tesseract是一款由Google赞助的开源OCR。 pytesseract是python包装器&#xff0c;它为可执行文件提供了pythonic API。 Tesseract 已经有 30 年历史&#xff0c;开始它是惠普实验室的一款专利软件&#xff0c;在2005年后由Google接手并进一步开发和完善。Tesseract支…

【Unity 实用插件篇】| 可视化图表插件XCharts (折线图、柱状图、饼图等)详细教学

前言 【Unity 实用插件篇】| 可视化图表插件XCharts (折线图、柱状图、饼图等)详细教学一、XCharts介绍1.1 特性1.2 相关网站链接1.3 效果展示 二、XCharts导入三、XCharts快速使用3.1 添加一个简单图表3.2 添加多个Seire3.3 给图表添加其他组件3.4 添加Serie组件&#xff0c;如…