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

在Vue.js中，当你从后端获取到文件流，特别是type为"application/octet-stream"或类似类型，通常表示下载文件的请求，你可以将其转换为Base64编码以便直接在页面上显示为图片。这里是一个简单的步骤：

1. **在后端处理**：
- 后端可以根据需要提供一个API，该API返回包含文件数据和元数据（如文件名、大小等），而不是直接生成文件流。

2. **前端接收并转换**：

   async function handleFileStream(response) {
     const file = await response.blob(); // 将二进制响应体转换为Blob对象
     const reader = new FileReader();
     reader.readAsDataURL(file); // 使用FileReader读取Blob

     reader.onload = () => {
       const base64Data = reader.result; // 这里就是Base64编码的图片数据
       // 现在可以将base64Data绑定到img标签的src属性
       document.getElementById('image').src = base64Data;
     };
     reader.onerror = (error) => {
       console.error('Error reading file:', error);
     };
   }

3. **在模板中使用**：

   <img id="image" :src="imageUrl" alt="Image from server">

其中`imageUrl`会通过上述函数赋值为Base64字符串。

请注意，如果文件过大，一次性加载到内存可能会导致性能问题，这时可能需要考虑分块加载或者提供预览选项。