JS 本地文件读取到 Blob 变量 - Javascript

在 JavaScript 中，我们可以使用 Blob 对象来存储二进制数据，如文本和图像。本文将介绍如何使用 JavaScript 从本地文件系统中读取文件并将其存储为 Blob 对象。

从本地文件系统中读取文件

要从本地文件系统中读取文件，我们将使用 FileReader 对象。FileReader 对象允许我们从文件中读取数据并将其存储为各种类型的对象，包括 Blob 对象。

下面是一个基本的示例，演示如何使用 FileReader 对象读取文件：

const input = document.getElementById('fileInput');
const file = input.files[0];

const reader = new FileReader();
reader.onload = function() {
  const data = reader.result;
  console.log(data);
}
reader.readAsText(file);

在此示例中，我们首先从 HTML 输入元素中获取文件。然后，我们创建 FileReader 对象，并添加一个 onload 回调函数，该函数在读取文件完成时被调用。在回调函数中，我们将文件结果存储在变量 data 中，并将其打印到控制台。

在这个例子中，我们使用 readAsText() 方法将文件读取为文本。还有其他可用的读取方法，如 readAsArrayBuffer() 和 readAsDataURL()，可读取文件作为二进制数据和数据 URL。

将文件读取为 Blob 对象

要将文件读取为 Blob 对象，我们可以在 FileReader 对象的 onload 回调函数中使用 Blob 构造函数来创建一个新的 Blob 实例，然后将文件结果传递给它。

下面是一个示例，演示如何将文件读取为 Blob 对象：

const input = document.getElementById('fileInput');
const file = input.files[0];

const reader = new FileReader();
reader.onload = function() {
  const data = reader.result;
  const blob = new Blob([data], { type: file.type });
  console.log(blob);
}
reader.readAsArrayBuffer(file);

在此示例中，我们首先从 HTML 输入元素中获取文件。然后，我们创建 FileReader 对象，并添加一个 onload 回调函数，该函数在读取文件完成时被调用。在回调函数中，我们将文件结果存储在变量 data 中，并使用 Blob 构造函数创建一个新的 Blob 实例，将文件数据作为参数传递给它。我们还通过 file.type 属性指定 Blob 的类型。

现在我们已经将文件读取为 Blob 对象了，我们可以使用它来执行各种任务，例如将文件上传到服务器或使用 URL.createObjectURL() 方法创建一个数据 URL，可以在 HTML <img> 元素中显示图像。

结论

JavaScript 中的 Blob 对象是处理二进制数据的有用工具。在本文中，我们介绍了如何使用 FileReader 对象从本地文件系统中读取文件并将其存储为 Blob 对象。我们还介绍了如何使用 Blob 构造函数将文件数据转换为 Blob 对象。

希望本篇文章能帮助你使用 Blob 对象更好的处理二进制数据。