本地图片预览的方式

一、图片预览的方式

不要等上传完毕再显示，需要一种快速本地预览图片的方法

1、URL.createObjectURL()

一个静态方法，创建一个 DOMString，返回一个 URL，URL 和 document 绑定，表示指定的 File 对象

文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

示例

function handleFiles(files) {
  for (let i = 0; i < files.length; i++) {
      const li = document.createElement("li");
      list.appendChild(li);

      const img = document.createElement("img");
      img.src = URL.createObjectURL(files[i]);
      img.height = 60;
      // 设置图片的 load 事件处理器来释放对象 URL，当图片加载完成之后对象 URL 就不再需要了
      img.onload = () => {
        URL.revokeObjectURL(img.src);
      };
      li.appendChild(img);
      const info = document.createElement("span");
      info.innerHTML = `${files[i].name}: ${files[i].size} bytes`;
      li.appendChild(info);
    }
}

2、FileReader.readAsDataURL()

一个 FileReader 上面的实例方法，读取指定的 File 对象，读取完成的时候触发回调，返回 URL 格式的字符串（base64）

文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL

示例

function handleFiles(files) {
  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    if (!file.type.startsWith("image/")) {
      continue;
    }

    const img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img); // 假设“preview”就是用来显示内容的 div

    const reader = new FileReader();
    reader.onload = (e) => {
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  }
}

二、异同

1、返回值

• FileReader.readAsDataURL(file)可以得到一段base64的字符串
• URL.createObjectURL(file)可以得到当前文件的一个内存URL

2、执行机制

• FileReader.readAsDataURL(file)通过回调的形式返回，异步执行
• URL.createObjectURL(file)直接返回，同步执行

3、内存清理

• FileReader.readAsDataURL(file) 依照JS垃圾回收机制自动从内存中清理
• URL.createObjectURL(file) 存在于当前doucment内，清除方式只有unload()事件或revokeObjectURL()手动清除 。

三、总结

URL.createObjectURL(file) 得到本地内存容器的URL地址，同步使用，比较方便快捷，多次使用需要注意手动释放内存的问题，性能优秀。

FileReader.readAsDataURL(file) 胜在直接转为base64格式，可以直接用于业务，无需二次转换格式。