从相对路径读取文件作为 ArrayBuffer答案

【问题标题】：Read file from relative path as ArrayBuffer从相对路径读取文件作为 ArrayBuffer
【发布时间】：2020-01-15 22:36:05
【问题描述】：

我正在尝试使用 FileReader API 将本地文件读入 ArrayBuffer，就像这样

let reader = new FileReader();

reader.onload = function(e) {
    let arrayBuffer = new Uint8Array(reader.result);
    console.log(arrayBuffer);
}

reader.readAsArrayBuffer(new File([], 'data.txt'));

但是我得到一个空的arrayBuffer

如何在浏览器中将此本地文件作为 ArrayBuffer 读取？

谢谢。

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/FileReader 重要提示：FileReader 仅用于以安全方式从用户（远程）系统读取文件内容。它不能用于简单地按路径名从文件系统中读取文件。在 JavaScript 中通过路径名读取文件，应该使用标准的 Ajax 解决方案进行服务器端文件读取，如果是跨域读取，则需要 CORS 权限。

标签： javascript filereader arraybuffer

【解决方案1】：

您无法通过浏览器按路径名读取文件。您需要让用户与文件系统交互并选择一个文件，然后才能读取内容。

const readFile = e => {
  const file = e.target.files[0]
  let reader = new FileReader();

  reader.onload = function(e) {
      let arrayBuffer = new Uint8Array(reader.result);
      console.log(arrayBuffer);
  }

  reader.readAsArrayBuffer(file);
}

document.querySelector("#fileItem").onchange=readFile

&lt;input id="fileItem" type="file"&gt;

【讨论】：