在Vue中处理接口返回的二进制图片数据

🌟 前言

欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白:个人主页

  • 🔥 个人专栏:✅前端技术 ✅后端技术

  • 🏠 个人博客:洛可可白博客

  • 🐱 代码获取:bestwishes0203

  • 📷 封面壁纸:洛可可白wallpaper

在这里插入图片描述

文章目录

  • 在Vue中处理接口返回的二进制图片数据
    • 摘要
    • 1. 问题分析
      • 1.1 环境检查
      • 1.2 问题描述
    • 2. 接口对接
      • 2.1 添加接口返回头
      • 2.2 请求数据示例
      • 2.3 使用`bufferUrl`和`btoa`函数
    • 3. 全部代码
    • 结语

在Vue中处理接口返回的二进制图片数据

摘要

在现代Web开发中,前端应用经常需要从后端接口获取图片数据。有时,这些图片数据以二进制格式返回,而不是常见的Base64编码。本文将指导你如何在Vue应用中处理这类二进制图片数据,并将其正确地显示在页面上。

1. 问题分析

1.1 环境检查

确保你的Vue项目能够正常发起网络请求,并且后端接口的跨域设置是正确的。如果需要,可以参考这篇文章洛可可白⚡️axios网络请求配置。

1.2 问题描述

当后端接口返回的响应类型为application/octet-streamimage/png等二进制格式时,我们需要特殊处理这些数据。

在这里插入图片描述

2. 接口对接

2.1 添加接口返回头

在axios请求中,我们需要指定responseTypearraybuffer,以便接收二进制数据。

// 使用axios获取二进制数据
request.get("/commonEntity/generateImageCode", {responseType: "arraybuffer",
}).then((res) => {console.log(res.data); // 二进制数据
});

2.2 请求数据示例

接口返回的二进制数据通常是一个ArrayBuffer对象。

在这里插入图片描述

2.3 使用bufferUrlbtoa函数

为了将二进制数据转换为Base64编码,我们可以使用btoa函数。然后,我们可以将Base64编码的字符串作为图片的src属性。

import request from "@/request";
import { onMounted, ref } from "vue";const imgSrc = ref('');onMounted(() => {request.get("/commonEntity/generateImageCode", {responseType: "arraybuffer",}).then((res) => {// 将ArrayBuffer转换为Base64编码的字符串const buffer = new Uint8Array(res);const base64String = btoa(buffer.reduce((data, byte) => data + String.fromCharCode(byte), ""));imgSrc.value = "data:image/png;base64," + base64String;});
});

3. 全部代码

以下是一个完整的Vue组件示例,展示了如何获取二进制图片数据并将其显示在页面上。

<template><img :src="imgSrc" alt="二进制图片">
</template><script setup lang="ts">
import request from "@/request";
import { onMounted, ref } from "vue";// 定义响应式引用imgSrc
const imgSrc = ref('');// 在组件挂载后发起请求
onMounted(() => {// 发起请求并处理二进制数据request.get("/commonEntity/generateImageCode", {responseType: "arraybuffer",}).then((res) => {// 将二进制数据转换为Base64编码const buffer = new Uint8Array(res);const base64String = btoa(buffer.reduce((data, byte) => data + String.fromCharCode(byte), ""));// 更新imgSrc的值为Base64编码的图片URLimgSrc.value = "data:image/png;base64," + base64String;});
});
</script>

结语

通过本文的教程,你应该能够理解如何在Vue应用中处理接口返回的二进制图片数据。这个技能对于处理各种类型的API响应非常有帮助,尤其是在前后端分离的开发模式中。记得在实际项目中根据实际情况调整代码,以适应不同的接口和数据格式。

感谢你的访问,期待与你在技术的道路上相遇!👋🌟🚀

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

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

相关文章

Android使用WebView打开外部网页链接

发布Android应用&#xff0c;除了用原生开发外&#xff0c;更多是采用内嵌H5网页的方式来做&#xff0c;便于更新以及多平台使用。 一、第一种方式是直接通过WebView打开外部H5链接。 新建Android工程 直接创建一个工程&#xff0c;点击运行就可以了&#xff0c;打开是个空页…

2024 批量下载公众号文章内容/阅读数/在看数/点赞数/留言数/粉丝数导出pdf文章备份(带留言):公众号记忆承载近1500篇历史文章在线查看,找文章方便了

关于公众号文章批量下载&#xff0c;我之前写过很多文章&#xff1a; 视频更新版&#xff1a;批量下载公众号文章内容/话题/图片/封面/音频/视频&#xff0c;导出html&#xff0c;pdf&#xff0c;excel包含阅读数/点赞数/留言数 2021陶博士2006/caoz的梦呓/刘备我祖/六神读金…

打造禹州中医药大模型,以AI驱动业务创新(内附孙思邈GPT内测版)

大禹智库 第78 期&#xff08;总第409 期&#xff09; 2024年 3 月 4 日 在中医药传承与发展的关键时期&#xff0c;结合许昌市的地域特色和产业优势&#xff0c;大禹智库提出“打造禹州中医药大模型&#xff0c;以AI驱动业务创新”的战略构想。本报告围绕构建禹州中医药现代化…

旅游陪同翻译,英译中需要具备什么能力!

随着中国旅游业的蓬勃发展&#xff0c;越来越多的外国游客选择踏足这片充满魅力的土地。然而&#xff0c;语言障碍常常成为他们探索中国文化的绊脚石。在这时&#xff0c;旅游陪同翻译应运而生&#xff0c;为游客提供了便捷的语言沟通服务&#xff0c;让他们的旅程更加顺畅和愉…

河北省国际光伏展览会

能源是国民经济发展的重要基础之一。随着国民经济的发展&#xff0c;能源的缺口增大&#xff0c;能源安全及能源在国民经济中的地位越显突出。我国是世界上少数几个能源结构以煤为INVITATION主的国家之一&#xff0c;也是世界上最大的煤炭消费国&#xff0c;燃煤造成的环境污染…

云轴科技ZStack荣获证券基金行业信息技术应用创新联盟年度优秀成员奖

近日&#xff0c;由中国证监会科技监管司、上海市经济和信息化委员会及上交所理事会科技发展委员会指导&#xff0c;证券基金行业信息技术应用创新联盟&#xff08;简称信创联盟&#xff09;主办的2023年年度工作会议在上海成功举办。会议汇聚了来自监管机构、政府机构、行业侧…

Spring Cloud Gateway自定义断言

问题&#xff1a;Spring Cloud Gateway自带的断言&#xff08;Predicate&#xff09;不满足业务怎么办&#xff1f;可以自定义断言&#xff01; 先看Spring Cloud Gateway是如何实现断言的 Gateway中断言的整体架构如下&#xff1a; public abstract class AbstractRoutePred…

【kerberos】hadoop集群使用keytab认证的逻辑

一、背景&#xff1a; haoop的kerberos认证核心是org.apache.hadoop.security.UserGroupInformation类。 UserGroupInformation一般有两种&#xff1a;&#xff08;1&#xff09;apache原生的&#xff08;2&#xff09;cdh hdp改良过的&#xff0c;即cloudera改良过的。 由此衍…

Flink并行度

1、Task flink中每个算子就是一个Task&#xff0c;比如flatMap、map、sum是一个Task。 2、SubTask 算子有几个并行度SubTask的数量就是几&#xff0c;比如 3、算子并行度 算子并行度指的是每个算子的并行度&#xff0c;可用env.setParallelism(1);设置所有算子的并行度&am…

基于Jupyter快速入门Python,Numpy,Scipy,Matplotlib

文章目录 Jupyter 和 Colab 笔记本PythonPython 版本基础数据类型数字Numbers布尔值Booleans字符串Strings 容器列表List字典Dictionaries集合Sets元组Tuples 函数类 Numpy数组Array数组索引Array indexing数据类型DatatypesArray math广播Broadcasting Scipy图像操作MATLAB文件…

goby的安装和使用

简介 Goby是一款基于网络空间测绘技术的新一代网络安全工具&#xff0c;它通过给目标网络建立完整的资产知识库&#xff0c;进行网络安全事件应急与漏洞应急。 Goby可提供最全面的资产识别&#xff0c;目前预置了超过10万种规则识别引擎&#xff0c;能够针对硬件设备和软件业…

一键查看:大厂网站都用了啥技术栈,有图有真相。

本次我们采用Wappalyzer插件来看下国内大厂的网站都采用了什么技术架构&#xff0c;文章最后由Wappalyzer的安装方法。 今日头条网站 淘宝网站 哔哩哔哩 京东商城 花瓣网 CSDN 国务院 网易 58同城 腾讯网 如何安装Wappalyzer 用Edge浏览器即可

Java后端八股笔记

Java后端八股笔记 Redis八股 上两种都有可能导致脏数据 所以使用两次删除缓存的技术&#xff0c;延时是因为数据库有主从问题需要更新&#xff0c;无法达到完全的强一致性&#xff0c;只能达到控制一致性。 一般放入缓存中的数据都是读多写少的数据 业务逻辑代码&#x1f44…

9、JavaWeb-文件上传-配置文件

P146 案例-文件上传-简介 文件上传&#xff0c;将本地图片、视频等文件上传到服务器&#xff0c;供其他用户浏览下载的过程。 文件上传前端页面三要素&#xff1a; 如果前端表单的编码格式选择的默认编码方式x-www.form-urlencoded&#xff0c;则提交的文件仅仅是文件名&…

【C++ STL详解】——string类

目录 前言 一、string类对象的常见构造 二、string类对象的访问及遍历 1.下标【】&#xff08;底层operator【】函数&#xff09; ​编辑 2.迭代器 3.范围for 4.at 5.back和front 三、string类对象的容量操作 1.size 和 length 2.capacity 3.empty 4.clear 5.res…

JVM-虚拟机栈概述

背景&#xff1a;由于跨平台的设计&#xff0c;java指令都是根据栈来设计的。不同平台CPU架构不同&#xff0c;所以不能设计为基于寄存器。 栈是运行时单位&#xff0c;而堆是存储的单位。即&#xff1a;栈解决程序运行的问题&#xff0c;即程序如何执行&#xff0c;或者说如何…

JavaWeb——013SpringBootWeb综合案例(事务管理、AOP)

事务&AOP 目录 事务&AOP1. 事务管理1.1 事务回顾1.2 Spring事务管理1.2.1 案例1.2.2 原因分析1.2.3 Transactional注解 1.3 事务进阶1.3.1 rollbackFor1.3.3 propagation1.3.3.1 介绍1.3.3.2 案例 2. AOP基础2.1 AOP概述2.2 AOP快速入门2.3 AOP核心概念 3. AOP进阶3.1 …

ai直播数字人:AI大模型应用开发的神奇世界

当AI技术的发展走向一个新的高峰&#xff0c;AI直播数字人逐渐成为人们关注的焦点。这种全新的数字人形态&#xff0c;通过大模型应用开发&#xff0c;带来了一个神奇世界。 在这个神奇世界里&#xff0c;AI直播数字人可以展现出与真实人类相媲美的外貌和声音。通过先进的图像…

方法中单独使用return关键字

一、return关键字的单独使用 二、示例代码 public class ReturnDemo {public static void main(String[] args) {chu(10,0);chu(10,2);}public static void chu(int a,int b){if (b 0) {System.out.println("除法出错&#xff0c;除数不能为零");return;}System.ou…

消息队列-kafka-消息发送流程(源码跟踪) 与消息可靠性

官方网址 源码&#xff1a;https://kafka.apache.org/downloads 快速开始&#xff1a;https://kafka.apache.org/documentation/#gettingStarted springcloud整合 发送消息流程 主线程&#xff1a;主线程只负责组织消息&#xff0c;如果是同步发送会阻塞&#xff0c;如果是异…