javascript - 如何选择FileReader的读取方式？

Question

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

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

Answer 1

对于“文件 uploader ”，您根本不应该使用 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% 的情况下，您可以使用 blobURI 或直接 Blob 来完成此 dataURI 的操作。我能看到的唯一一种情况是在一些独立文档中附加二进制数据...或者，并不是每个网站每天都会发生的事情...
• readAsBinaryString() 相当无用，甚至已从标准中删除。如果您确实需要文件的二进制字符串表示形式，则可以从 ArrayBuffer 生成一个，但您将如何处理该字符串是一个谜。 (直接使用ArrayBuffer)。