FileReader：readAsDataURL() 方法

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 接口的 readAsDataURL() 方法用于读取指定的 Blob 或 File 对象的内容。当读操作完成时，readyState 属性变为 DONE，并触发 loadend 事件。此时，result 属性包含作为 data: URL 的数据，将文件的数据表示为 base64 编码字符串。

备注： 如果不先删除 Base64 编码数据前面的 Data-URL 声明，则 blob 的 result 无法直接解码为 Base64。要仅检索 Base64 编码的字符串，请首先从结果中删除 data:*/*;base64,。

语法

js
readAsDataURL(blob)

参数

blob

从中读取的 Blob 或 File 对象。

返回值

无（undefined）。

示例

读取单个文件

HTML

html
<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="图片预览" />

JavaScript

js
function previewFile() {
  const preview = document.querySelector("img");
  const file = document.querySelector("input[type=file]").files[0];
  const reader = new FileReader();

  reader.addEventListener(
    "load",
    () => {
      // 将图像文件转换为 Base64 字符串
      preview.src = reader.result;
    },
    false,
  );

  if (file) {
    reader.readAsDataURL(file);
  }
}

结果

读取多个文件

HTML

html
<input id="browse" type="file" multiple />
<div id="preview"></div>

JavaScript

js
function previewFiles() {
  const preview = document.querySelector("#preview");
  const files = document.querySelector("input[type=file]").files;

  function readAndPreview(file) {
    // 确保 `file.name` 符合我们的文件扩展名标准
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
      const reader = new FileReader();

      reader.addEventListener(
        "load",
        () => {
          const image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = reader.result;
          preview.appendChild(image);
        },
        false,
      );

      reader.readAsDataURL(file);
    }
  }

  if (files) {
    Array.prototype.forEach.call(files, readAndPreview);
  }
}

const picker = document.querySelector("#browse");
picker.addEventListener("change", previewFiles);

结果

规范

Specification
File API
# readAsDataURL

浏览器兼容性

BCD tables only load in the browser

参见