js 获取自身文件的Blob对象

在 Web 应用程序中，我们通常使用 `<input type="file">` 标签来让用户选择文件。如果你想要获取这个文件的 Blob 对象，可以使用以下方法：

1. 为 `<input>` 标签添加 `change` 事件监听器，当用户选择文件后触发该事件。

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', () => {
  // 获取文件对象
  const file = input.files[0];
  // 使用 FileReader 对象读取文件内容，得到 Blob 对象
  const reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onload = () => {
    const blob = new Blob([reader.result], { type: file.type });
    console.log(blob);
  };
});

2. 获取文件对象后，使用 `FileReader` 对象读取文件内容，得到 Blob 对象。需要注意的是，`FileReader` 的 `readAsArrayBuffer` 方法返回的结果是 `ArrayBuffer` 对象，需要将其转换为 `Uint8Array` 类型，再将其传递给 `Blob` 构造函数。

上述代码中，我们使用了 `Blob` 构造函数来创建 Blob 对象，第一个参数是一个数组，包含文件内容的二进制数据，第二个参数是一个对象，包含文件的 MIME 类型。 至此，我们就可以获取自身文件的 Blob 对象了。