FileReader:result 属性

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

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

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

结果类型如下所述。

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

示例

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

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

js
// 给定这个 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

js
// 给定这个 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

参见