FileReader：result 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

备注： 此特性在 Web Worker 中可用。

FileReader 接口的 result 只读属性返回文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪种方法来启动读取操作。

值

根据使用哪种读取方法来启动读取操作的适当的字符串或 ArrayBuffer 对象。如果读取尚未完成或不成功，则值为 null。

结果类型如下所述。

方法	描述
`readAsArrayBuffer()`	`result` 属性是一个包含二进制数据的 JavaScript `ArrayBuffer` 对象。
`readAsBinaryString()`	`result` 属性包含来自文件的字符串中的原始二进制数据。
`readAsDataURL()`	`result` 属性是一个字符串，其中包含表示文件数据的 `data:` URL。
`readAsText()`	`result` 属性是字符串中的文本。

示例

这个例子展示了一个函数 reader()，它从文件输入框读取文件。它的工作原理是创建一个 FileReader 对象并为 load 事件创建一个侦听器，这样当读取文件时，result 被获取并传递给提供给 reader() 的回调函数。

内容作为原始文本数据进行处理。

// 给定这个 type="file" 的 HTMLInputElement：
// <input id="image" type="file" accept="image/*">

function reader(file, callback) {
  const fr = new FileReader();
  fr.onload = () => callback(null, fr.result);
  fr.onerror = (err) => callback(err);
  fr.readAsDataURL(file);
}

document.querySelector("#image").addEventListener("change", (evt) => {
  // 没有文件，什么也不做。
  if (!evt.target.files) {
    return;
  }
  reader(evt.target.files[0], (err, res) => {
    console.log(res); // Base64 `data:image/...` 字符串结果。
  });
});

鉴于 FileReader 的异步性质，你可以使用基于 Promise 的方法。下面是一个文件输入框的示例，其 multiple 属性返回一个 Promise。

// 给定这个 HTMLInputElement：
// <input id="images" type="file" accept="image/*" multiple>

const reader = (file) =>
  new Promise((resolve, reject) => {
    const fr = new FileReader();
    fr.onload = () => resolve(fr);
    fr.onerror = (err) => reject(err);
    fr.readAsDataURL(file);
  });

async function logImagesData(fileList) {
  let fileResults = [];
  const frPromises = fileList.map(reader);

  try {
    fileResults = await Promise.all(frPromises);
  } catch (err) {
    // 在这种特定情况下，Promise.all() 可能优于 Promise.allSettled()，因为将 FileList 修改为用户最初选择的文件的子集并非易事。因此，让我们隐藏整个操作。
    console.error(err);
    return;
  }

  fileResults.forEach((fr) => {
    console.log(fr.result); // Base64 `data:image/...` 字符串结果。
  });
}

// HTMLInputElement type="file" 事件处理器：
document.querySelector("#images").addEventListener("change", (evt) => {
  // 没有文件，什么也不做。
  if (!evt.target.files) {
    return;
  }
  logImagesData([...evt.target.files]);
});

规范

Specification
File API # dom-filereader-result

浏览器兼容性

BCD tables only load in the browser

参见

FileReader