FileReader：result 属性

注意：此功能在Web Workers中可用。

result 是 FileReader 接口的只读属性，它返回文件的內容。此属性仅在读取操作完成后才有效，并且数据的格式取决于用于启动读取操作的方法。

值

根据用于启动读取操作的读取方法，返回相应的字符串或 ArrayBuffer。如果读取尚未完成或不成功，则值为 null。

下面描述了结果类型。

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

示例

此示例展示了一个名为 reader() 的函数，该函数从文件输入中读取文件。它的工作原理是创建一个 FileReader 对象，并为 load 事件创建一个监听器，以便在读取文件时获取 result 并将其传递给提供给 reader() 的回调函数。

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

// Given this HTMLInputElement of type="file":
// <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) => {
  // No files, do nothing.
  if (!evt.target.files) {
    return;
  }
  reader(evt.target.files[0], (err, res) => {
    console.log(res); // Base64 `data:image/...` String result.
  });
});

鉴于 FileReader 的异步特性，您可以使用基于 Promise 的方法。以下是一个使用具有 multiple 属性的文件输入的示例，它返回一个 Promise。

// Given this 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) {
    // In this specific case, Promise.all() might be preferred
    // over Promise.allSettled(), since it isn't trivial to modify
    // a FileList to a subset of files of what the user initially
    // selected. Therefore, let's just stash the entire operation.
    console.error(err);
    return;
  }

  fileResults.forEach((fr) => {
    console.log(fr.result); // Base64 `data:image/...` String result.
  });
}

// HTMLInputElement type="file" Event handler:
document.querySelector("#images").addEventListener("change", (evt) => {
  // If no files, do nothing.
  if (!evt.target.files) {
    return;
  }
  logImagesData([...evt.target.files]);
});

规范

规范
文件 API # dom-filereader-result

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅

FileReader