Vue 读取后台二进制文件流转为图片显示，2024最新秋招前端岗面试清单

在Vue中，你可以使用axios库来发送HTTP请求以获取后端的二进制文件流，然后将这个流转换为图片显示在页面上。以下是一个简单的示例：

1. 安装axios（如果尚未安装）:

npm install axios

2. 在Vue组件中使用axios获取二进制流并转换为图片:

<template>
  <div>
    <img :src="imageSrc" alt="后端返回的图片" />
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      imageSrc: ''
    };
  },
  mounted() {
    this.fetchImage();
  },
  methods: {
    fetchImage() {
      const url = '你的后端文件流接口地址'; // 替换为实际接口地址
      axios({
        method: 'get',
        url: url,
        responseType: 'blob', // 重要：设置响应类型为blob
      }).then(response => {
        // 创建一个Blob URL
        this.imageSrc = URL.createObjectURL(new Blob([response.data]));
      }).catch(error => {
        console.error('There was a problem fetching the image:', error);
      });
    }
  }
};
</script>

在这个示例中，我们首先在mounted钩子中调用fetchImage方法来发送请求。我们设置responseType为'blob'以确保我们能正确处理二进制数据。然后，我们使用URL.createObjectURL方法将获取到的blob转换为一个可以在<img>标签中使用的图片URL。这样，图片就会在页面上显示出来。