时间戳

首页 > 解决方案 > 如何选择 FileReader 读取方法？

javascript - 如何选择 FileReader 读取方法？

问题描述

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

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

标签： javascriptimageimage-processing

解决方案

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

您无需读取文件即可上传，您可以直接将其作为 Blob 发送。

如果需要在当前页面显示，仍然不需要 FileReader，从 Blob 创建一个 blobURI，它将直接指向磁盘上的 File，没有无用的内存膨胀。

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）。

推荐阅读