Vue 读取后台二进制文件流转为图片显示

Vue 读取后台二进制文件流转为图片显示
后台返回格式
在这里插入图片描述
在这里插入图片描述

 <img :src="payImg" id="image" style="width: 150px;height: 150px;" alt="">

axios写法

在这里插入图片描述

重点 responseType: ‘blob’ , 使用的是res中的data blob

this.$axios.post('http://116.148.227.196:xxx/api/xxx/xxx', {参数}, {responseType: 'blob' // 重点}).then((res) => {const url = window.URL.createObjectURL(new Blob([res.data], { type: 'image/png' }));this.payImg= url;});

本文章参考 https://huaweicloud.csdn.net/63a56170b878a545459459f2.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/807490.shtml

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

相关文章

Windows安装MySQL

文章目录 一、下载MySQL安装包1、选择版本以及Windows系统点击下载2、选择No thanks,just start my download.3、下载到指定目录解压即可 二、添加环境变量三、添加配置文件四、初始化MySQL数据库服务器五、安装启动服务六、修改连接登录密码七、停止MySQL服务 一、下载MySQL安…

Linux网络的封包和拆包

一般使用socket 到令牌环网然后向上逐渐拆包 MTU:最大的传输单元 以太网&#xff1a;1500 mss&#xff1a;网络类型&#xff0c;线路&#xff0c;以及特性相关

数据库知识点汇总(最全!,2024年最新大佬分享开发经验

十九、删除数据 DELETE 语句 使用 DELETE 语句从表中删除数据。 DELETE FROM table [WHERE condition]; 删除数据 使用 WHERE 子句删除指定的记录 DELETE FROM departments WHERE department_name ‘Finance’; 如果省略 WHERE 子句&#xff0c;则表中的全部数据将被删除 DELE…

[自研开源] MyData v0.8 数据集成案例分享

开源地址&#xff1a;gitee | github 详细介绍&#xff1a;MyData 基于 Web API 的数据集成平台 部署文档&#xff1a;用 Docker 部署 MyData 使用手册&#xff1a;MyData 使用手册 试用体验&#xff1a;https://demo.mydata.work 交流Q群&#xff1a;430089673 案例&#xff…

Oracle 11g完全卸载教程(Windows)

文章目录 一、停止Oracle服务二、卸载Oracle1、卸载Oracle产品2、删除注册表3、删除环境变量以及其余文件 一、停止Oracle服务 进入服务 找到服务中的Oracle服务并且停止 全部停止运行成功 二、卸载Oracle 1、卸载Oracle产品 点击开始菜单找到Oracle&#xff0c;然后点击…

实验模拟 搭建elk 日志分析系统

目录 一 实验环境 二 ELK Elasticsearch 集群部署&#xff08;在Node1、Node2节点上操作&#xff09; 1&#xff0c;环境准备 2, 部署 Elasticsearch 软件(node1 node2) 2.1安装es 2.2设置开机自启 2.3修改 elasticsearch主配置文件&#xff08;先备份&#xff09;…

【vue/uniapp】使用 smooth-signature 实现 h5 的横屏电子签名

通过github链接进行下载&#xff0c;然后代码参考如下&#xff0c;功能包含了清空、判断签名内容是否为空、生成png/jpg图片等。 签名效果&#xff1a; 预览效果&#xff1a; 下载 smooth-signature 链接&#xff1a;https://github.com/linjc/smooth-signature 代码参考&a…

极狐GitLab 如何在 helm 中恢复数据

本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了如何在极狐GitLab …

查杀linux挖矿病毒 kswapd0

中毒现象 高cpu占用&#xff0c;使用top命令查看cpu使用率长时间50%以上&#xff0c;cpu占用异常的进程八成就是挖矿病毒进程 此病毒隐藏了自己&#xff0c;top命令无法查看到挖矿病毒进程&#xff0c;可通过sysdig命令找到隐藏进程 安装sysdig curl -s https://s3.amazonaw…

[CSS]样式属性+元素设置

哎呀&#xff0c;好多东西&#xff0c;根本记不住&#xff0c;更多的还是边用边记吧&#xff0c;这里的代码就当使用范例&#xff0c;但其实如果可以让gpt应该会更好&#xff0c;哎学吧&#xff0c;反正记得住当然更好 文本 属性名描述word-break单词换行。取值如下&#xff1…

[自研开源] MyData数据融合平台 诚邀试用

MyData &#xff0c;一个旨在简化 Web 应用之间数据对接的工具&#xff0c;提高日常工作效率&#xff0c;如其名“我的数据” 旨在让用户更好的掌控和管理数据。 v1.0 的目标是&#xff1a;针对多应用之间数据集成的场景&#xff0c;为开发人员提供更安全、更方便的对接集成方…

Elasticsearch8.x 设置密码

文章目录 一、环境说明二、使用elasticsearch-reset-password工具修改1、elasticsearch-reset-password工具位置2、设置密码 一、环境说明 elasticsearch版本&#xff1a;8.13.0 系统版本&#xff1a;Ubuntu 18.04.6 二、使用elasticsearch-reset-password工具修改 1、elast…

【Java程序员面试专栏 综合面试指南】5年资深程序员面试指南

基础知识对于5年内工作经验的同学考察相对比较多。包括编程语言、计算机网络、操作系统、设计模式、分布式知识、MySQL、Redis这种。其中随着年限的增长,基础知识考察的会越来越少,例如操作系统基本上只在学生阶段考察,计算机网络对于5年经验来说也考察的相对较少。5年以上对…

优化策略:企业海量文件传输事件处理(上)

在当今快速发展的商业环境中&#xff0c;企业的数据量正以前所未有的速度增长。这种增长不仅带来了机遇&#xff0c;也带来了挑战&#xff0c;特别是在文件传输任务的管理上。文件传输是企业日常运营中不可或缺的一部分&#xff0c;它涉及到大量的数据流动和信息交换。因此&…

0 idea搭建springboot项目

1 2 3 4 5 配置文件 application.yaml server:servlet:context-path: /app #项目名controller //注入到spring容器 Controller public class HelloController {GetMapping("hello")ResponseBodypublic String hello(){return "Hello,SpringBoot";} }启…

【MATLAB 预测算法教程】_1粒子群算法优化BP神经网络预测 - 教程和对应MATLAB代码

本文以MATLAB自带的脂肪数据集为例,将数据保存在EXCEL工作簿内,方便替换数据使用,以下介绍粒子群算法优化BP神经网络预测的MATLAB代码编写,主要流程包括1. 读取数据 2.划分训练集和测试集 3.归一化 4.确定BP神经网络的隐含层最优节点数量 5. 使用粒子群算法优化BP的神经网络…

[数据概念|数据技术]智能合约如何助力数据资产变现

“ 区块链上数据具有高可信度&#xff0c;智能合约将区块链变得更加智能化&#xff0c;以支持企业场景。” 之前鼹鼠哥已经发表了一篇文章&#xff0c;简单介绍了区块链&#xff0c;那么&#xff0c;智能合约又是什么呢&#xff1f;它又是如何助力数据资产变现的呢&#xff1f;…

Swagger转换成Excel文件

1、添加swagger解析依赖包&#xff1a; <dependency><groupId>io.swagger.parser.v3</groupId><artifactId>swagger-parser</artifactId><version>2.1.12</version></dependency>2、示例代码&#xff1a; package com.rlclou…

华为校招机试 - 相似图片分类(20240410)

题目描述 小明想要处理一批图片&#xff0c;将相似的图片分类。 他首先对图片的特征采样&#xff0c;得到图片之间的相似度&#xff0c;然后按照以下规则判断图片是否可以归为一类&#xff1a; 相似度 > 0 表示两张图片相似如果 A 和 B 相似&#xff0c;B 和 C 相似&…

基于spring boot的大学生体质测试管理系统

基于spring boot的大学生体质测试管理系统设计与实现 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 …