如何使用Blob 直接读取本地文件

Blob (Binary Large Object) 是一种表示不可变二进制数据的数据结构，你可以使用它来直接读取本地文件或将网络响应转换为 Blob 对象。以下是使用 JavaScript 的 HTML5 FileReader API 从本地文件创建 Blob 的基本步骤：

1. **HTML 部分**：
创建一个 `<input type="file">` 元素让用户选择文件：

   <input id="fileInput" type="file" accept=".jpg, .png" />

2. **JavaScript 部分**：
添加事件监听器来读取选定的文件：

   const fileInput = document.getElementById('fileInput');
   fileInput.addEventListener('change', function(e) {
     const file = e.target.files[0]; // 获取用户选择的第一个文件

     if (!file) return; // 没有选择文件则忽略

     const reader = new FileReader();
     reader.onload = function(event) {
       const blob = event.target.result; // 成功读取后得到 Blob 对象
       // 现在你可以对blob做进一步操作，如上传到服务器或显示其内容
     };
     reader.readAsArrayBuffer(file); // 读取文件为ArrayBuffer
   });

`readAsArrayBuffer()` 用于将文件读入到内存中的 ArrayBuffer，这一步骤完成后，就可以将 ArrayBuffer 转换为 Blob。

3. **处理 Blob**：
如果需要，你可以使用 `URL.createObjectURL(blob)` 来创建一个 URL，然后将这个 URL 赋值给元素的 `src` 属性展示图像，或者发送给服务器进行处理。

请注意，由于同源策略，Blob 对象通常只能在当前源内部使用，但在一些特定情况下（如服务端渲染或特定环境下的权限设置），你可以在其他源下使用它们。