vue:将后端返回文件流( type: “application/octet-stream“ )转换为base64图片展示

在Vue.js中，当你从后端获取一个文件流（例如，type为"application/octet-stream"），通常表示的是二进制数据，包括图片、PDF等。将其转换为Base64编码以便于前端显示，可以按照以下步骤操作：

1. **拦截器处理**:
如果你在项目中使用axios或其他HTTP客户端库，可以在响应拦截器里对返回的数据进行处理。先读取文件流，然后转码。

axios.interceptors.response.use(response => {
  if (response.data && response.data.type === 'application/octet-stream') {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = function () {
        resolve({ data: reader.result, filename: response.headers['content-disposition'] || '' });
      };
      reader.readAsDataURL(response.data);
    });
  }
  return response;
}, error => Promise.reject(error));

2. **模板中渲染**:
在接收到了Base64编码的文件后，在HTML模板上可以用`v-bind`绑定到一个img标签的`src`属性。

<img :src="data.data" alt="图片描述" :alt="filename" />

如果文件名可用，也可以同时显示文件名作为图标的标题：

<img :src="data.data" :alt="filename" :title="filename" />