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

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

本文章是转载文章,原文章: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.mzph.cn/news/9688.shtml

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

相关文章

FUNBOX_1靶场详解

FUNBOX_1靶场复盘 这个系列的靶场给出的干扰因素都挺多的,必须从中找到有用的线索才可以。 这个靶场你扫描到ip地址后打开网页会发现,ip自动转换成域名了,所以我们需要添加一条hosts解析才可以。 192.168.102.190 funbox.fritz.box从目录…

element 表格里,每一行都循环使用el-popover组件,关闭按钮失效问题如何解决?

具体代码 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><title></title><link rel"stylesheet" href"https://unpkg.com/element-ui/lib/theme-chalk/index.css"><styl…

解决了项目中几个比较搞心态的bug(前端vue、小程序)

1、keep-alive 正常keep-alive的使用便可以做项目的缓存&#xff0c;但是我们的项目很不正常 项目是属于动态缓存&#xff0c;动态缓存有一个弊端 举个栗子&#xff1a; a组件为设置了需要缓存的页面&#xff1b; b组件为设置了需要缓存的页面&#xff1b; c组件为设置了不需…

资源成本降低70%!华为MetaERP资产核算的Serverless架构实践

资产核算是指在一定的财务周期&#xff0c;对企业拥有的房屋建筑物、机器设备、商标权和专利权等资产的取得、折旧和处置的会计核算&#xff0c;反映企业固定资产、无形资产的增减变动和价值分摊活动。华为资产核算产品&#xff0c;支撑企业资产从获取到处置全生命周期的管理和…

速锐得智能汽车车身域CANFD控制芯片MCU接口电路原理图

CAN总线技术不仅涉及汽车电子和轨道交通&#xff0c;还涉及医疗器械、工业控制、智能家居和机器人网络互连&#xff0c;这些行业对CAN产品的稳定性和抗干扰能力都有很高的要求。 上篇我们讲了在汽车CAN FD上&#xff0c;数据出错可能导致数据位被错误地解析为填充位&#xff0c…

MyBatis源码剖析之二级缓存细节

MyBatis是一个流行的Java持久化框架&#xff0c;它提供了许多功能&#xff0c;包括支持一级缓存和二级缓存。 一级缓存是默认开启的&#xff0c;它是在SqlSession层面的缓存。在同一个SqlSession中&#xff0c;如果执行了相同的SQL语句&#xff0c;那么第二次执行将从缓存中获取…

求整数中的最大值

才用打擂台的形式&#xff0c;先放一个数max在擂台上&#xff0c;然后每个数都上去和他比较&#xff0c;如果上去的那个数比max大&#xff0c;那么就把max替换成那个数站在擂台上&#xff0c;依次比较&#xff0c;直到所有数都比较完后&#xff0c;站在擂台上的那个max就是最大…

2023年深圳杯数学建模C题无人机协同避障航迹规划

2023年深圳杯数学建模 C题 无人机协同避障航迹规划 原题再现&#xff1a; 平面上A、B两个无人机站分别位于半径为500 m的障碍圆两边直径的延长线上&#xff0c;A站距离圆心1 km&#xff0c;B站距离圆心3.5 km。两架无人机分别从A、B两站同时出发&#xff0c;以恒定速率10 m/s…

玩转ChatGPT:Custom instructions (vol. 1)

一、写在前面 据说GPT-4又被削了&#xff0c;前几天让TA改代码&#xff0c;来来回回好几次才成功。 可以看到之前3小时25条的限制&#xff0c;现在改成了3小时50条&#xff0c;可不可以理解为&#xff1a;以前一个指令能完成的任务&#xff0c;现在得两条指令&#xff1f; 可…

Hadoop优化

1.Datanode管理多块数据盘 1.理解 其实就是扩展Datanode空间,之前一个盘,现在加一个盘或者多个盘, 2.优点: 1.提高容错(避免硬盘损坏全部数据丢失)2.实现数据分离模式存储(框架本体与数据分离,集群出现问题数据可进行单独恢复,这样也是提高容错) 3.配置&#xff08;临时挂…

认识雪花id

首先,个人理解,雪花id不是全球的,它只能保证一个分布式服务的范围内的ID是不重复的. 一.SnowFlake 雪花算法 SnowFlake 中文意思为雪花&#xff0c;故称为雪花算法。最早是 Twitter 公司在其内部用于分布式环境下生成唯一 ID。在2014年开源 scala 语言版本。 雪花算法的原理…

SpringBoot实战(二十三)集成 SkyWalking

目录 一、简介二、拉取镜像并部署1.拉取镜像2.运行skywalking-oap容器3.运行skywalking-ui容器4.访问页面 三、下载解压 agent1.下载2.解压 四、创建 skywalking-demo 项目1.Maven依赖2.application.yml3.DemoController.java 五、构建启动脚本1.startup.bat2.执行启动脚本3.发…

uniapp 微信小程序 预览pdf方法

效果图&#xff1a; 1、在小程序中 // #ifdef MP */ 是区分运行的环境&#xff0c;在小程序中可使用如下方法uni.downloadFile({url: item.link,//文件地址success: function (res) {var filePath res.tempFilePath;uni.openDocument({filePath: filePath,showMenu: false…

多线程面试题--线程池

目录 介绍 线程池的核心参数/执行原理 核心参数 执行原理​编辑 常见的阻塞队列 ArrayBlockingQueue和LinkedBlockingQueue区别 如何确定核心线程数 线程池的种类有哪些 创建使用固定线程数的线程池 单线程化的线程池 可缓存线程池 “延迟”和“周期执行”的线程池 总…

理光310/320/325系列激光打印机加粉后不换芯片清零方法

设置步骤&#xff1a; 依次按停止107开始键进入维修模式&#xff0c; 按下键两次选择Engine Maintenance,点OK键进入&#xff0c; 按上键选择Refill mode项后点OK键&#xff0c; 按下键选择到Pure refill mode后点Ok键(默认是Auto refill mode)&#xff0c; 然后按两次后退…

【MySQL】索引是什么东东?

书中的目录&#xff0c;就是充当索引的角色&#xff0c;方便我们快速查找书中的内容&#xff0c;所以索引是以空间换时间的设计思想。 索引和数据位于存储引擎中&#xff0c;MySQL默认的存储引擎是InnoDB。 1 为什么MySQL采用B树作为索引&#xff1f; 1.1 其他数据结构为什么…

PostgreSQL--实现数据库备份恢复详细教学

前言 这是我在这个网站整理的笔记&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;RodmaChen PostgreSQL--实现数据库备份恢复详细教学 一. 数据库备份二. 数据库恢复三. 存留问题 数据库备份恢复功能是每个产品所需的&#xff0c;以下是简单的脚本案例&a…

3-Linux实操

Linux实践操作 开关机、重启、用户登陆注销关机&重启用户登陆和注销 用户管理添加用户修改用户密码删除用户查询用户信息切换用户查看当前用户用户组的添加和删除用户和组相关文件 实用指令指定运行级别init 命令帮助指令文件目录类时间日期类搜索查找类&#x1f50d;压缩和…

Java获取调用当前方法的方法名和行数(亲测可行)

有时候一个方法被很多方法调用了&#xff0c;但是在调试应用程序的时候&#xff0c;需要知道是哪个方法调用它的&#xff0c;方便定位bug问题。否者&#xff0c;比较难以理清和解决一些bug问题。 适用&#xff1a;任何适用java语言编程的地方&#xff0c;java后端和android端。…

实用人工智能 2.0,在线“学习、探索和构建”ML 模型

人工智能爱好者过去需要在一个好的GPU上投资数千美元才能“动手”进行机器学习&#xff0c;但现在一个简单的网络浏览器就足够了。总部位于硅谷的非营利组织PracticalAI最近发布了“PracticalAI2.0”&#xff0c;该平台包括TensorFlow 2.0Keras中的说明性机器学习课程&#xff…