如何获取 blob 对象里的二进制文件

在JavaScript中，Blob对象通常代表不可变的数据块，它可以表示各种类型的二进制数据，如图像、音频、视频等。如果你需要从Blob对象获取其内部的二进制数据，你可以通过创建一个新的FileReader实例并使用它的readAsArrayBuffer方法来读取Blob的内容。以下是一个简单的步骤：

let blob = ... // 你的Blob对象

// 创建FileReader实例
let reader = new FileReader();

// 设置读取完成的处理函数
reader.onload = function (event) {
  let binaryData = event.target.result; // 这里就是Blob的二进制数据
  // 现在binaryData变量就是一个Uint8Array，你可以对其进行操作
};

// 开始读取
reader.readAsArrayBuffer(blob);

在这个处理函数`onload`中，`event.target.result`返回的是一个ArrayBuffer对象，它包含了Blob的原始二进制内容。

相关问题

vue3 typescript 如何将blob 对象里的二进制文件发送给API

在Vue3中结合TypeScript，如果你想将Blob对象中的二进制文件发送到API，通常会涉及FormData API，因为Blob可以方便地添加到表单数据中。这里是一个基本步骤：

1. 首先，你需要创建一个FormData实例，并将Blob对象添加到其中：

const fileInput = document.querySelector<HTMLInputElement>("input[type=file]")!; // 获取输入文件的元素
const file = fileInput.files![0]; // 获取用户选择的文件

// 将Blob转换为FormData
const formData: FormData = new FormData();
formData.append("file", file);

2. 然后你可以创建一个axios、fetch或者其他HTTP客户端库的请求，将FormData作为body发送：

import axios from 'axios';

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data' // 设置正确的Content-Type
  }
})
.then(response => console.log('上传成功:', response.data))
.catch(error => console.error('上传失败:', error));

或者使用fetch：

async function uploadFile() {
  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    const data = await response.json(); // 如果返回JSON，记得解析它
    console.log('上传成功:', data);
  } catch (error) {
    console.error('上传失败:', error);
  }
}
uploadFile();

将 blob 对象转换为一个二进制文件

将 Blob 对象转换为二进制文件通常是在浏览器环境中，比如 Node.js 的 Express 中处理文件上传或者从后端返回下载数据的时候。Blob（Binary Large Object）是一种在浏览器环境下表示二进制数据的对象，而将其转换为文件是为了让用户可以保存到本地。

在 JavaScript 中，你可以使用以下步骤：

1. 创建一个 `a` 标签，设置其 `href` 属性为 Blob URL（通过 `URL.createObjectURL(blob)` 得到），然后触发它的点击事件模拟用户下载操作：

const blob = ... // 你的 Blob 对象
const url = URL.createObjectURL(blob);
const aLink = document.createElement('a');
aLink.href = url;
aLink.download = 'file-name'; // 文件名
aLink.click();
// 然后记得移除临时 URL 避免内存泄漏
window.URL.revokeObjectURL(url);

如果你需要直接写入硬盘，Node.js 使用 `fs` 模块配合 `createWriteStream` 可行：

const fs = require('fs');
const writeStream = fs.createWriteStream('path/to/download/file');
blob.pipe(writeStream);
writeStream.on('finish', () => {
  writeStream.close();
});