如何使用 JavaScript 操作 Blob 和 File 对象？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

Blob 对象的操作

Blob 对象表示一个不可变的，原始数据的类文件对象。它通常用于处理二进制数据，如图片、音频、视频等。

创建 Blob 对象：

可以使用 Blob 构造函数创建 Blob 对象，需要传入一个包含数据的数组，以及一个可选的配置对象，指定 MIME 类型。

const blob = new Blob(['Hello, Blob!'], { type: 'text/plain' });
const imageBlob = new Blob([new Uint8Array([0xff, 0xd8, 0xff, 0xe0])], { type: 'image/jpeg' }); //JPEG 图像的开始字节

第一个参数是包含数据块的数组，可以是字符串，ArrayBuffer，Blob，或任何其他ArrayBufferView类型。
第二个参数是一个可选的配置对象，包含 type 属性（MIME类型）和 endings属性(用于处理行结束符)。

读取 Blob 对象的数据:

Blob 对象不能直接被读取，需要使用 FileReader 或 URL.createObjectURL 等方法。

使用 FileReader 读取：

 const reader = new FileReader();
 reader.onload = (event) => {
    console.log(event.target.result); // 获取读取到的数据
 };
 reader.readAsText(blob); // 读取为文本
 reader.readAsDataURL(blob); // 读取为 base64 字符串
 reader.readAsArrayBuffer(blob); // 读取为 ArrayBuffer

使用 URL.createObjectURL 创建 URL:

const url = URL.createObjectURL(blob);
console.log(url); // 输出 blob URL，例如：blob:http://localhost:8080/xxxxx
// 可以在 img 标签的 src 属性中使用这个 url
// 或者在 a 标签中用作下载链接
// ...
// 用完后释放 URL
URL.revokeObjectURL(url);
    ```

Blob 对象的属性:

size: Blob 对象的大小（以字节为单位）。
type: Blob 对象的 MIME 类型。

File 对象的操作

File 对象继承自 Blob 对象，代表一个文件。它除了包含 Blob 对象的属性和方法外，还包含了文件相关的信息，如文件名和最后修改时间。File 对象主要在 <input type="file"> 元素或者拖放 API 中获取。

获取 File 对象：

从 <input /> 元素获取:

// www.javascriptcn.com code example
 <input type="file" id="fileInput">
  <script>
   const fileInput = document.getElementById('fileInput');
   fileInput.addEventListener('change', (event) => {
       const file = event.target.files[0];
      console.log(file); // 输出 File 对象
      // 对file进行操作...
   });
 </script>

从拖放事件获取:

// www.javascriptcn.com code example
 <div id="dropZone" style="width:200px;height:200px;border:1px solid black">拖拽文件到这里</div>
 <script>
     const dropZone = document.getElementById('dropZone');
     dropZone.addEventListener('dragover', (event) => {
          event.preventDefault();
     });
     dropZone.addEventListener('drop', (event) => {
       event.preventDefault();
       const file = event.dataTransfer.files[0];
       console.log(file); // 输出 File 对象
       //对file进行操作...
     });
 </script>

File 对象的属性：

name: 文件名。
size: 文件大小（以字节为单位）。
type: 文件的 MIME 类型。
lastModified: 文件最后修改时间的时间戳（以毫秒为单位）。

File 对象的操作: File 对象的操作和 Blob 对象类似，都需要使用FileReader读取数据或者使用 URL.createObjectURL 创建 URL.

本题详细解读

Blob 对象的理解

Blob (Binary Large Object) 对象是 JavaScript 中用于处理原始二进制数据的基本对象。它的核心作用是存储和操作大量二进制数据，例如图像、音频、视频以及其他类型的文件内容。它提供了一种抽象的方式来处理这些二进制数据，而无需关心其具体的格式。

Blob 的创建：

Blob 对象可以通过 Blob() 构造函数创建，它接受两个参数：

array: 一个包含数据的数组，数组中的每一项可以是以下类型之一:
- String: 字符串数据
- ArrayBuffer: 二进制数据
- ArrayBufferView: ArrayBuffer的视图，如 Uint8Array, Int32Array等
- Blob: 其他的 Blob 对象
options: 可选的配置对象，包含：
- type: 字符串，指定 Blob 对象的 MIME 类型，如 'image/jpeg', 'text/plain'等。
- endings: 字符串，指定行尾符的处理方式，可选值为transparent(不改变行尾符) 或 native(将行尾符改为操作系统默认的行尾符) , 默认值 transparent。

Blob 的用途:

数据传输: Blob 可以作为请求体发送到服务器，例如上传文件。
数据存储: 在浏览器中，Blob 可以存储在 IndexedDB 等本地存储中。
数据处理: Blob 可以与其他 API 结合使用，如 FileReader 用于读取 Blob 的内容，或 URL.createObjectURL 用于创建 Blob 的 URL。
生成文件: Blob 可以用于在客户端生成并下载文件。

File 对象的理解

File 对象是 Blob 的一种特殊类型，它代表了一个本地文件。File 对象继承自 Blob 对象，并添加了文件相关的属性。File 对象主要通过 HTML 的 <input type="file"> 元素或者拖放 API 获取。

File 对象的特性:

继承自 Blob: 拥有 Blob 对象的所有属性和方法。
文件名 (name): 包含文件的文件名。
最后修改时间 (lastModified): 包含文件的最后修改时间戳。
文件内容: 可以使用 FileReader 读取文件内容。

File 的用途:

文件上传: File 对象主要用于处理用户通过表单上传的文件，或者通过拖放上传的文件。
文件信息获取: 可以获取文件的各种元信息，如文件名、文件大小等。
文件预览: 可以使用 URL.createObjectURL 生成临时 URL 用于预览文件。

FileReader 的作用：

FileReader 对象用于读取 Blob 或者 File 对象的内容。FileReader 提供了多种读取方法：

readAsText(): 以文本格式读取 Blob 或 File 对象。
readAsArrayBuffer(): 以 ArrayBuffer 格式读取 Blob 或 File 对象。
readAsDataURL(): 以 base64 编码的 URL 格式读取 Blob 或 File 对象。
readAsBinaryString(): 以二进制字符串格式读取Blob或File对象。(已废弃)

URL.createObjectURL 的作用：

URL.createObjectURL() 用于创建指向 Blob 或 File 对象的临时 URL。这个 URL 可以在 HTML 元素（如 <img> 或 <a>）中使用，用于预览或下载数据。

URL.revokeObjectURL 的作用:

URL.revokeObjectURL() 用于释放使用 URL.createObjectURL() 创建的临时 URL，防止内存泄漏。在不再需要使用 URL 时，应该及时释放。

总结

Blob 和 File 对象是 JavaScript 中处理二进制数据的关键对象。理解它们之间的关系、属性和使用方法对于前端开发非常重要。熟练掌握 Blob 和 File 对象的创建、读取和操作，能够更好地处理文件上传、下载、数据存储等相关任务。