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

🌟 前言

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

• 🤖 洛可可白：个人主页

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

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

• 🐱 代码获取：bestwishes0203

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

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

摘要

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

1. 问题分析

1.1 环境检查

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

1.2 问题描述

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

2. 接口对接

2.1 添加接口返回头

在axios请求中，我们需要指定responseType为arraybuffer，以便接收二进制数据。

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

2.2 请求数据示例

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

2.3 使用bufferUrl和btoa函数

为了将二进制数据转换为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响应非常有帮助，尤其是在前后端分离的开发模式中。记得在实际项目中根据实际情况调整代码，以适应不同的接口和数据格式。

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