FileReader - 读取本地文件

1. 介绍

异步读取本地文件内容。

只能读取通过 拖拽 或 <input type="file"> 选中的文件的内容。

2. 方法

2.1. FileReader.readAsDataURL()

说明：

• 读取图片文件，并返回 data:image/png;base64,... 字符串

示例：

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

    reader.onload = function () {
      const base64 = reader.result;
      // data:image/png;base64,...
      
      resolve(base64);
    };
 
    reader.onerror = function () {
      reject(new Error("Failed to load file"));
    };
  });
}

参考：

• JavaScript base64 与 File 之间的互转 (opens new window)

2.2. FileReader.readAsText()

示例：

<input type="file" onchange="previewFile()" /><br />
<p class="content"></p>

<script>
function previewFile() {
  const content = document.querySelector(".content");
  const [file] = document.querySelector("input[type=file]").files;
  const reader = new FileReader();

  reader.addEventListener(
    "load",
    () => {
      // this will then display a text file
      content.innerText = reader.result;
    },
    false,
  );

  if (file) {
    reader.readAsText(file);
  }
}
</script>

参考：

• FileReader: readAsText() method —— MDN (opens new window)

3. 参考

• FileReader —— MDN (opens new window)