ArrayBuffer和Blob：揭秘JavaScript二进制操作

2024-02-02 23:30:44

序曲：二进制与JavaScript

在计算机的世界中，二进制占据着不可撼动的地位。无论是图片、声音、视频还是文本，最终都以0和1的形式进行存储和处理。尽管JavaScript作为一门高级语言，并不直接处理二进制数据，但它依然提供了ArrayBuffer和Blob这两个API，为二进制数据的处理提供了便捷的途径。

ArrayBuffer：二进制数据的舞台

ArrayBuffer是JavaScript中用于存储二进制数据的类型化数组。它与常规的数组不同，它存储的是二进制数据，而不是数字或字符串。这意味着我们可以直接操作ArrayBuffer中的二进制数据，而不必担心数据转换的问题。

ArrayBuffer的创建非常简单，只需要指定要存储的二进制数据的长度即可。一旦ArrayBuffer创建完成，我们就可以通过Uint8Array、Int16Array等类型化数组来访问和操作ArrayBuffer中的二进制数据。

Blob：二进制数据的容器

Blob是JavaScript中表示二进制数据的对象。它可以包含任意类型的二进制数据，如图片、声音、视频等。Blob的创建也十分简单，只需要指定要存储的二进制数据即可。

Blob与ArrayBuffer的主要区别在于，它提供了更多的操作方法，如：

slice()方法：可以从Blob中截取出一部分二进制数据。
append()方法：可以将另一个Blob追加到当前Blob的末尾。
size属性：表示Blob的大小。
type属性：表示Blob的类型。

实战演练：让JavaScript处理二进制

为了更好地理解ArrayBuffer和Blob的使用，我们来看两个实际的例子。

预览本地图片

当我们需要在网页中预览本地图片时，通常需要先使用<input type="file">元素选择图片文件，然后将选中的图片文件转换为Blob对象，再通过Blob URL的方式将图片显示在网页上。

const input = document.querySelector('input[type="file"]');

input.addEventListener('change', () => {
  const file = input.files[0];
  const reader = new FileReader();

  reader.onload = () => {
    const blob = new Blob([reader.result], { type: file.type });
    const url = URL.createObjectURL(blob);
    const img = document.createElement('img');

    img.setAttribute('src', url);
    document.body.appendChild(img);
  };

  reader.readAsArrayBuffer(file);
});

上传文件到服务器

当我们需要将文件上传到服务器时，通常需要先将文件转换为Blob对象，然后通过XMLHttpRequest或fetch API将Blob对象发送到服务器。

const file = document.querySelector('input[type="file"]').files[0];
const formData = new FormData();

formData.append('file', file);

const xhr = new XMLHttpRequest();

xhr.open('POST', '/upload', true);
xhr.send(formData);