Js File() Blob() 详解

File() 对象

File() 对象表示一个用户系统上的文件。它继承了 Blob 对象的功能，并提供了更多与文件相关的操作。

File() 对象的属性

• name ：文件的名称。
• size ：文件的大小，以字节为单位。
• type ：文件的 MIME 类型。
• lastModified ：文件的最后修改时间。

File() 对象的方法

• slice() ：将文件的一部分提取为一个新的 File 对象。
• stream() ：创建一个可读流来读取文件的内容。
• text() ：将文件的内容作为文本字符串读取。
• arrayBuffer() ：将文件的内容作为 ArrayBuffer 对象读取。

Blob() 对象

Blob() 对象表示一个二进制数据块。它可以是文件的一部分，也可以是其他来源的数据。

Blob() 对象的属性

• size ：Blob 对象的大小，以字节为单位。
• type ：Blob 对象的 MIME 类型。

Blob() 对象的方法

• slice() ：将 Blob 对象的一部分提取为一个新的 Blob 对象。
• stream() ：创建一个可读流来读取 Blob 对象的内容。
• text() ：将 Blob 对象的内容作为文本字符串读取。
• arrayBuffer() ：将 Blob 对象的内容作为 ArrayBuffer 对象读取。

如何创建 File() 对象

可以使用以下方法创建 File() 对象：

• 从 <input type="file"> 元素中获取文件。
• 使用 FileReader 对象读取文件。
• 使用 Blob() 构造函数创建一个新的 File() 对象。

如何将文件转换为 Blob 对象

可以使用以下方法将文件转换为 Blob 对象：

• 使用 FileReader 对象读取文件。
• 使用 Blob() 构造函数创建一个新的 Blob 对象，并将文件作为参数传入。

如何使用 Blob 对象创建数据URL

可以使用以下方法使用 Blob 对象创建数据URL：

• 使用 URL.createObjectURL() 方法创建一个数据URL。
• 使用 FileReader 对象读取 Blob 对象，然后使用 FileReader.result 属性获取数据URL。

使用 File() 和 Blob() 对象的示例

以下是一些使用 File() 和 Blob() 对象的实际示例：

• 使用 <input type="file"> 元素上传文件：

<input type="file" id="file-input">

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];

  // 处理文件
});

• 使用 FileReader 对象读取文件：

const file = new File(['Hello, world!'], 'hello.txt', {
  type: 'text/plain',
});

const fileReader = new FileReader();

fileReader.onload = (event) => {
  const text = event.target.result;

  // 处理文本
};

fileReader.readAsText(file);

• 使用 Blob() 构造函数创建一个新的 File() 对象：

const blob = new Blob(['Hello, world!'], {
  type: 'text/plain',
});

const file = new File([blob], 'hello.txt');

// 处理文件

• 使用 URL.createObjectURL() 方法创建一个数据URL：

const blob = new Blob(['Hello, world!'], {
  type: 'text/plain',
});

const dataURL = URL.createObjectURL(blob);

// 使用数据URL

总结

File() 和 Blob() 对象是 JavaScript 中用于处理文件和二进制数据的对象。File() 对象表示一个用户系统上的文件，Blob() 对象表示一个二进制数据块。这两个对象都提供了丰富的 API，可以用于各种各样的文件操作。