Vue拿到二进制流图片转为正常图片并显示

背景

在前后端分离的应用中，后端可能以二进制流的形式返回图片数据，比如验证码图片、用户上传的图片等。前端需要处理这些二进制数据并将其显示在网页上，这时候可以利用arrayBuffer将二进制流转换为Base64编码，再绑定到图片的src属性上，以便在Vue组件中正常显示。

Vue 中如何实现

为了实现从服务器获取二进制流图片并在Vue页面上显示的需求，我们可以按照以下步骤进行：

第一步：请求二进制流数据

使用Axios从服务器获取二进制流数据，最关键的一点是设置responseType为arraybuffer，这样服务器返回的图片数据就会以二进制数组的形式存储在前端。

axios({
	    method: 'get',
	    url: '/api/get-image',  // 请求的图片接口地址
	    responseType: 'arraybuffer'  // 设置响应类型为arraybuffer
	})
	.then(function (response) {
	    this.src = 'data:image/jpeg;base64,' + this.arrayBufferToBase64(response.data);
	})
	.catch(function (error) {
	    console.error('获取图片失败', error);
	});

在上面的代码中，我们通过axios发送GET请求来获取图片数据，responseType设置为arraybuffer，这是将二进制数据转换为ArrayBuffer的关键，方便后续处理。

第二步：将二进制流转换为Base64格式

由于HTML中的img标签不支持直接加载arraybuffer格式的图片数据，我们需要将其转换为Base64格式。为此，我们可以定义一个arrayBufferToBase64的转换函数，具体代码如下：

arrayBufferToBase64(buffer) {
    let binary = '';
    let bytes = new Uint8Array(buffer);
    let len = bytes.byteLength;
    for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}

这个函数的主要步骤如下：

创建一个Uint8Array对象，用于表示arraybuffer数据。

遍历数组中的每一个字节，将其转换为对应的二进制字符。

最后使用方法将二进制字符数据转换为Base64格式的字符串。

第三步：绑定图片数据到Vue组件

获取到Base64字符串后，我们可以将其绑定到Vue组件的src属性上，使其成为图片的来源，代码如下：

<img :src="src" alt="验证码">

在上面的代码中，src属性指向的就是前面获取到的Base64编码字符串，从而能够将图片在页面中正确显示。

完整代码实现

以下是一个完整的Vue组件代码示例，展示了如何从服务器获取图片并显示的过程：

<template>
  <div>
    <input type="button" value="获取图片" @click="getImage" />
    <img v-if="src" :src="src" alt="验证码" />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      src: ''  // 用于存储图片的Base64编码
    };
  },
  methods: {
    getImage() {
      axios({
        method: 'get',
        url: '/api/get-image',  // 图片接口地址
        responseType: 'arraybuffer'  // 设置响应类型为arraybuffer
      })
      .then(response => {
        this.src = 'data:image/jpeg;base64,' + this.arrayBufferToBase64(response.data);
      })
      .catch(error => {
        console.error('获取图片失败', error);
      });
    },
    arrayBufferToBase64(buffer) {
      let binary = '';
      let bytes = new Uint8Array(buffer);
      let len = bytes.byteLength;
      for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      return window.btoa(binary);
    }
  }
};
</script>

<style scoped>
img {
  max-width: 300px;
  margin-top: 10px;
}
</style>

深入探讨与优化方案

图片类型支持

在请求到的图片数据中，可能存在多种不同的格式（如jpeg、png等），我们需要根据后端返回的Content-Type来判断并动态设置前缀。例如：

const contentType = response.headers['content-type'];
this.src = `data:${contentType};base64,` + this.arrayBufferToBase64(response.data);

这样可以确保兼容多种图片格式，增强代码的通用性。

Blob 对象替代方案

另一种处理方式是利用Blob对象，将二进制数据转换为一个临时的URL，这样也可以用于显示图片：

const blob = new Blob([response.data], { type: 'image/jpeg' });
this.src = URL.createObjectURL(blob);

这种方式的优点是更加节省内存，但Blob对象的URL会随着页面的关闭而失效，不适合长期存储。

错误处理与用户提示

在实际场景中，可能出现服务器返回错误或者图片获取失败的情况，因此我们需要对请求过程中的错误进行捕获，并给用户友好的提示。例如：

.catch(error => {
  console.error('获取图片失败', error);
  this.$notify({ type: 'error', message: '图片获取失败，请重试' });
});

使用类似element-ui的通知组件来提醒用户图片加载失败，可以显著改善用户体验。

缓存优化

如果图片在一段时间内不会改变，可以考虑对获取的图片进行缓存，减少重复请求：

if (!this.src) {
  // 没有缓存图片，才发送请求
  this.getImage();
}

这样做能够减少与服务器的交互，降低延迟和资源消耗。

图片懒加载

在一些页面中，可能需要显示多张图片。如果这些图片全部通过二进制流加载且直接显示，可能会消耗较多带宽和内存。因此，可以考虑对图片实现懒加载，只有当图片即将进入用户视口时才发起请求。

结合IntersectionObserver API可以实现图片懒加载：

mounted() {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        this.getImage();
      }
    });
  });
  observer.observe(this.$refs.imageElement);
}

通过懒加载，可以有效减轻页面加载时的压力，提高页面的整体响应速度。

封装请求逻辑

为了使代码更加简洁和模块化，可以将请求图片的逻辑封装到一个服务中，这样不仅提高代码复用性，还能更好地管理请求：

import axios from 'axios';

export function fetchImage(url) {
  return axios({
    method: 'get',
    url,
    responseType: 'arraybuffer'
  }).then(response => {
    return 'data:image/jpeg;base64,' + arrayBufferToBase64(response.data);
  });
}

function arrayBufferToBase64(buffer) {
  let binary = '';
  let bytes = new Uint8Array(buffer);
  let len = bytes.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary);
}

这样在组件中只需调用fetchImage(url)即可获取图片数据，代码更加清晰易读。

秒客网