URL.createObjectURL 与 FileReader 的区别

在 JavaScript 中，我们可以使用 URL.createObjectURL 和 FileReader 两种不同的方式来读取和处理文件。它们都可以让我们在客户端（浏览器）中读取文件，但两种方式有所不同，下面我们将为您介绍它们的区别。

URL.createObjectURL

URL.createObjectURL 是一个用于将文件转换成URL的API。使用这个API，我们可以在客户端上快速地生成一个带目标文件数据的URL。我们可以使用该URL来下载文件或者将其展示在HTML标签（例如和）中。

使用方法：

const url = URL.createObjectURL(file);

其中，file 为一个 File或者 BloB 对象，通过该对象我们可以将一个文件转换为 Blob 对象，并将其转换为 URL。

示例：

const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
const url = URL.createObjectURL(file);

const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = file.name;
document.body.appendChild(downloadLink);
downloadLink.click();

使用上述代码，我们可以将选择的文件转换为 URL，并使用该 URL 来下载文件。

FileReader

FileReader 是一个文件读取API，它可以读取文件的内容，并将其以文本或者二进制的方式呈现给我们。使用该API，我们可以处理各种不同的文件，例如读取文本文件用于分析，或者读取图片并将其展示在 HTML文档中。

使用方法：

const reader = new FileReader();
reader.addEventListener("load", (event) => {
  const contents = event.target.result;
  console.log(contents);
});
reader.readAsText(file);

在上述代码中，我们首先实例化一个 FileReader 对象，并将其用于读取一个文件。通过添加一个 load 事件监听器，我们可以在文件被加载时获取文件内容。最后，我们通过调用 readAsText 方法来指定读取文件的方式（文本或二进制）。

示例：

const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];

const reader = new FileReader();
reader.addEventListener("load", (event) => {
  const contents = event.target.result;
  const img = document.createElement('img');
  img.src = contents;
  document.body.appendChild(img);
});

reader.readAsDataURL(file);

使用上述代码，我们可以将选择的图片展示在 HTML 中。注意，在这个例子中，我们使用 reader.readAsDataURL 将图片以 base64 的方式读取出来，并将其赋值给一个 标签。

总结

URL.createObjectURL 和 FileReader 都可以进行文件处理，但它们的使用场景和方式略有不同。URL.createObjectURL 适用于下载或展示文件，而 FileReader 则适用于读取文件内容。请根据您的需求，选择适合您的方式。