如何选择 FileReader 读取方法？

Question

在制作一个简单的图片上传器时，我正在学习 FileReader API。上传文件有4种格式，数组缓冲区、二进制字符串、数据URL和文本，我想知道如何选择。

在少数几篇文章中，this 表示，当你想显示上传的图片时数据 URL 很好，当你操作文件时数组缓冲区很好。你怎么看？而且，什么时候是选择二进制字符串或文本格式的好时机？

Answer 1

对于“文件上传器”，您根本不应该使用 FileReader。

您无需阅读文件即可上传，you can send it as a Blob directly。

如果你需要在当前页面显示它，你仍然不需要一个 FileReader，create a blobURI from the Blob，它将直接指向磁盘上的文件，没有无用的内存膨胀。

inp.onchange = e => {
  // yes that's all synchronous...
  const url = URL.createObjectURL(inp.files[0]);
  const img = new Image();
  img.src = url;
  document.body.appendChild(img);
};

<input type="file" id="inp" accept="image/*">

---

FileReader 的唯一用例是当您需要访问文件的内容时，例如，

• 如果您想加载文本文件（或 csv 或 json）并对其进行解析，那么您将使用 readAsText() 方法。
• 如果您想读取/编辑一些二进制文件（例如读取 JPEG 文件的元数据？），那么您将使用 readAsArrayBuffer()，并从此缓冲区工作。
• readAsDataURL() 不幸被滥用太多，如前所述，在 99% 的情况下，您将从这个 dataURI 执行的操作可以使用 blobURI 或直接使用 Blob 完成。我能看到的唯一一种情况是在某个独立文档中附加二进制数据......或者，不是每个网站每天都会发生的事情......
• readAsBinaryString() 相当没用，甚至已从标准中删除。如果您确实需要文件的二进制字符串表示，您可以从 ArrayBuffer 生成一个，但您将如何处理此字符串是一个谜。 （直接使用 ArrayBuffer）。