responsetype: blob 后端返回类型

当使用 `responsetype: blob` 时，后端返回的数据会被视为二进制数据，并被存储在一个 `Blob` 对象中。这种类型常用于处理文件下载、图像上传等二进制数据的场景。在获取到 `Blob` 对象后，可以使用 `FileReader` 对象进行读取和处理。以下是一个使用 `responsetype: blob` 的示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/example.jpg');
xhr.responseType = 'blob';
xhr.onload = function() {
  const blob = xhr.response;
  const reader = new FileReader();
  reader.readAsDataURL(blob); // 将二进制数据转为 base64 编码的字符串
  reader.onload = function() {
    const base64Data = reader.result;
    console.log(base64Data); // 输出 base64 编码的字符串
  }
}
xhr.send();

相关问题

vue:将后端返回文件流( type: "application/octet-steam" )数据，转换为pdf展示

在Vue.js中，当后端返回文件流作为`application/octet-stream`类型的响应，通常这意味着它是一个二进制数据，例如PDF文档。为了将这个数据转换并显示为下载或预览PDF，你可以按照以下步骤操作：

1. 首先，在你的Vue组件中设置一个方法来处理接收到的文件流数据：

methods: {
  downloadOrPreviewPdf(fileData) {
    const blob = new Blob([fileData], {type: 'application/pdf'});
    
    // 下载文件
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'document.pdf'; // 可以为你的PDF命名
    link.click();

    // 或者在线预览
    // 使用iframe或其他支持blob的HTML元素
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
  }
}

2. 然后，在后端API调用成功之后，将响应数据传递给上述方法：

axios.get('/api/download-pdf', {
  responseType: 'arraybuffer'
}).then(response => {
  this.downloadOrPreviewPdf(response.data);
})
.catch(error => console.error(error));

这里假设你使用了axios库进行HTTP请求。

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字符串。

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