使用 FileReader 在 JavaScript 中读取本地文件

Question

JavaScript 的 FileReader 是一个类，它使您能够从浏览器中运行的 JavaScript 读取用户机器上的文件。 FileReader 通常用于从一个读取数据 <input type="file">。

例如假设您的页面上有一个带有 id 的文件输入 select-file，这是打印当前所选文件内容的方法。

const file = document.querySelector('#select-file').files[0];
const reader = new FileReader();

reader.onload = res => {
  console.log(res.target.result); // Print file contents
};
reader.onerror = err => console.log(err);

reader.readAsText(file);

下面是一个实时示例，每次您选择不同的文件时都会将文件内容打印到控制台。 在 Linux/Windows 上单击 Ctrl+Shift+J 或在 OSX 上单击 Cmd+J 打开 Chrome 控制台并尝试一下！

FileReader 在现代浏览器以及 IE10 中得到很好的支持，注意 FileReader 是一个浏览器 API，虽然大多数浏览器都支持它， FileReader不是 Node.js 的 一部分。

使用 Promise 和 Async/Await

FileReader 类的 async API 不适合与 async/await 或 promise chaining 。 这是你如何包装一个 FileReader 在链式承诺中：

function readFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = res => {
      resolve(res.target.result);
    };
    reader.onerror = err => reject(err);

    reader.readAsText(file);
  });
}

有了以上 readFile() 助手，您可以在异步函数中读取文件：

async function onSubmit() {
  const file = document.querySelector('#select-file').files[0];

  const contents = await readFile(file);
}