在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编码的图片URL
    imgSrc.value = "data:image/png;base64," + base64String;
  });
});
</script>

结语

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

产品经理必看,教你写一份简单的产品说明书

作为一名产品经理&#xff0c;你可能会为如何写一份能够有效传达产品特性和使用步骤的说明书而困扰。确实&#xff0c;写作产品说明书的过程中&#xff0c;需要详细并准确展示产品的所有功能&#xff0c;同时保持文本清晰、简洁和易于理解。以下是一些步骤和技巧&#xff0c;可…

AntV L7的pointLayer点图层

本案例使用L7库和Mapbox GL JS创建点数据并加载进地图。 文章目录 1. 引入 CDN 链接2. 引入组件3. 创建地图4. 创建场景5. 创建点数据5.1. 普通 json 数据5.2. geojson 数据 6. 创建点图层6.1. 普通 json 数据6.2. geojson 数据 7. 演示效果8. 代码实现 1. 引入 CDN 链接 <s…

不注册访问 Claude3 大模型

随着Claude3大模型的出世&#xff0c;大模型霸主地位已经发生易位&#xff0c;但是国内使用Claude3官网 无论是注册都不容易&#xff0c;本篇文章主要介绍如何不通过Claude3 官网实现Claude3 大模型的使用&#xff0c;这里优先推荐Chatbot Arena 一、直接通过第三方代理 Chatb…

CorelDRAW Graphics Suite2024免费试用体验15天版下载

使用基于全球知名的 Corel Painter 画笔技术构建的 100 款逼真像素画笔&#xff0c;以全新的方式将您独特的想法变为现实&#xff01;试用 CorelDRAW 的全新美术画笔&#xff0c;探索您的创意想法。 使用 CorelDRAW 中现在可用的远程字体&#xff0c;畅享更多创作自由&#xf…

Humanoid-Gym 开源人形机器人端到端强化学习训练框架!星动纪元联合清华大学、上海期智研究院发布!

系列文章目录 前言 Humanoid-Gym: Reinforcement Learning for Humanoid Robot with Zero-Shot Sim2Real Transfer GitHub Repository: GitHub - roboterax/humanoid-gym: Humanoid-Gym: Reinforcement Learning for Humanoid Robot with Zero-Shot Sim2Real Transfer 一、介…

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

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

软考70-上午题-【面向对象技术2-UML】-UML中的图1

一、图的定义 图是一组元素的图形表示&#xff0c;大多数情况下把图画成顶点、弧的联通图。 顶点&#xff1a;代表事物&#xff1b; 弧&#xff1a;代表关系。 可以从不同的角度画图&#xff0c;UML提供了13种图&#xff1a;&#xff08;只看9种&#xff09; 类图&#xff…

内联函数|auto关键字|范围for的语法|指针空值

文章目录 一、内联函数1.1概念1.2特性 二、auto关键字2.2类型别名思考2.3auto简介2.4auto使用细则2.4 auto不能推导的场景 三、基于范围的for循环(C11)3.1 范围for的语法 四、指针空值nullptr(C11)4.1 C98中的指针空值 所属专栏:C初阶 一、内联函数 1.1概念 以inline修饰的函…

内部订单预算管理 在建工程项目结转流程以及用户操作步骤

业务流程概述: 所有的内部定单(项目)在月底时都必须将当月发生的费用按结算规则结转到在建工程卡片中。为保证结转的正确性,在系统中可以先查看项目费用的明细表后再由系统自动结转到在建工程卡片中。 对于已竣工的项目,还需要到系统中查看项目报表,根据报表将工程实际发生…

【人工智能入门必看的最全Python编程实战(2)】

4.4.2 复合语句&#xff1a; if语句&#xff0c;当条件成立时执行语句包。它经常包含elif、else子句。while语句&#xff0c;当条件为真时&#xff0c;重复执行语句包。for语句&#xff0c;遍历列表、字符串、字典、集合等迭代器&#xff0c;依次处理迭代器中的每个元素。matc…

设计模式——2_4 中介者(Mediator)

我寄愁心与明月&#xff0c;随风直到夜郎西 ——李白《闻王昌龄左迁龙标遥有此寄》 文章目录 定义图纸一个例子&#xff1a;怎么调度一组地铁站台和地铁开车指挥中心 碎碎念中介者和表单平台思想但是这种平台便利性是要付出代价的变化隔离原则 姑妄言之 定义 用一个中介者对象…

吴恩达机器学习-可选实验室:特征工程和多项式回归(Feature Engineering and Polynomial Regression)

文章目录 目标工具特征工程和多项式回归概述多项式特征选择功能备用视图扩展功能复杂的功能 恭喜! 目标 在本实验中&#xff0c;你将:探索特征工程和多项式回归&#xff0c;它们允许您使用线性回归的机制来拟合非常复杂&#xff0c;甚至非常非线性的函数。 工具 您将利用在以…

PageHelper 又给我上了一课!

多年不用PageHelper了&#xff0c;最近新入职的公司&#xff0c;采用了此工具集成的框架&#xff0c;作为一个独立紧急项目开发的基础。项目开发起来&#xff0c;还是手到擒来的&#xff0c;但是没想到&#xff0c;最终测试的时候&#xff0c;深深的给我上了一课。 # 我的项目发…

SpringCloud-SpringBoot读取Nacos上的配置文件

在 Spring Boot 应用程序中&#xff0c;可以使用 Spring Cloud Nacos 来实现从 Nacos 服务注册中心和配置中心读取配置信息。以下是如何在 Spring Boot 中读取 Nacos 上的配置文件的步骤&#xff1a; 1. 引入依赖 首先&#xff0c;在 Spring Boot 项目的 pom.xml 文件中添加 …

2007-2022年上市公司迪博内部控制评价缺陷数量数据

2007-2022年上市公司迪博内部控制评价缺陷数量数据 1、时间&#xff1a;2007-2022年 2、范围&#xff1a;上市公司 3、指标&#xff1a;证券代码、证券简称、辖区、证监会行业、申万行业、是否存在财报内控重大缺陷、财报内控重大缺陷数量、是否存在财报内控重要缺陷、财报内…

亚信安慧AntDB:“融合+实时”引领数据库创新

在当今多变的数据应用场景中&#xff0c;AntDB作为行业领先的超融合流式实时数仓&#xff0c;秉承着“融合实时”的研发理念&#xff0c;全面应对企业日益复杂的数据处理需求。通过SQL接口访问多种执行引擎&#xff0c;AntDB在实现交易、分析等多重能力的“超融合”方面取得了显…

智能指针基础知识【C++】【RAII思想 || unique_ptr || shared_ptrweak_ptr || 循环引用问题】

目录 一&#xff0c;为什么需要智能指针 二&#xff0c;内存泄露的基本认识 1. 内存泄露分类 2. 常见的内存检测工具 3&#xff0c;如何避免内存泄露 三&#xff0c;智能指针的使用与原理 1. RAII思想 2. 智能指针 &#xff08;1. unique_ptr &#xff08;2. shared_…

CSS补充(下),弹性布局(上)

高级选择器 1.兄弟选择器 2.同时满足 div.bg{background-color: red;}p.bg{background-color: green;}spam.bg{background-color: blue;}注&#xff1a;选择器中间没有空格&#xff0c;有明确标识的选择器写在后面 3.各种伪类的应用 3.1作为第几个子元素 选择器:nth-child…

达梦数据库——如何查看数据库大字段中的数据内容

今天get到一个小知识点 分享给大家&#xff0c;如何在数据库查看大字段中的数据内容。 以下为演示步骤&#xff0c;简单易懂&#xff0c;操练起来吧 首先创建一个含有CLOB、TEXT的大字段测试表 create table "SYSDBA"."CS"("COLUMN_1" CLOB,&qu…