简单了解 JavaScript 是如何操作二进制数据的

Blob ( Binary Large Object ) 对象表示一个二进制文件的数据内容，通常用来读写图片等文件。与 ArrayBuffer 不同的是，Blob 用于操作二进制文件，ArrayBuffer 操作的是内存。

Blob 以数据块 ( chunks ) 的形式存储数据，每个 chunk 都可以拥有自己的 MIME 类型。例如上传多种类型的文件，这些文件具有不同的 MIME 类型，但是可以用一个 Blob 对象存储。

const textData = 'text data block'
const imageData = new Uint8Array([0xFF, 0xD8, 0xFF, 0xE0])

const textBlob = new Blob([textData], { type: 'text/plain' })
const imageBlob = new Blob([imageData], { type: 'image/jpeg' })

// 将两个 blob 组合成一个
const multiPartBlob = new Blob([textBlob, imageBlob]);

console.log(textBlob.type)      // text/plain
console.log(imageBlob.type)     // image/jpeg
console.log(multiPartBlob.type) // "" (type not specified for multipart Blob)

Blob、File、ReadableStream

在 Web 中处理文件和二进制数据时，File、Blob 和 ReadableStream 都是重要的 API。它们分别用于表示文件、二进制数据片段和可读取的数据流。

File 用于表示用户在表单中上传的文件，它继承自 Blob，具有 Blob 的所有功能，同时还包含了文件的一些信息，如文件名、文件大小、最后修改时间等。

File 通常用于处理用户上传的文件，如图像、文档等。

const fileInput = document.getElementById('file-input')
const file = fileInput.files[0]
console.log(file.name, file.size)

Blob 表示二进制数据的不可变片段，可以包含任何类型的数据，如图像、音频、视频、文件等。

Blob 通常用于存储和传输二进制数据，也可以用于构建 File 对象。

const data = new Uint8Array([0, 1, 2, 3])
const blob = new Blob([data], { type: 'application/octet-stream' })

ReadableStream 用于处理可读取的数据流。ReadableStream 可以逐块读取大型数据，而不需要将整个数据加载到内存中。

ReadableStream 适用于从网络、文件或其他数据源异步读取数据。

const response = fetch('https://api.example.com/data')
const stream = response.body

const reader = stream.getReader()
reader.read().then(({ done, value }) => {
  if (!done) {
    console.log('Read:', value)
  }
})

总结

• File 用于表示用户上传的文件，包含文件的信息和二进制数据。
• Blob 表示二进制数据的不可变片段，适用于存储和传输图片等二进制数据。
• ReadableStream 用于处理数据流，适用于异步读取大型数据。