预览本地图片

做上传图片时，我通常是上传图片完成后，后端保存图片并响应挂载好的图片 url，前端获取到后通过 image 的 src 加载。这样会导致发送一次 HTTP 请求，有没有更好的方式？

Base64

使用 base64 编码格式是可以被image标签解析出图片的。需要使用FileReader读取出文件并转换成 base64 字符串

function byBase64() {
  const fd = new FileReader();
  // data是对应的File文件
  fd.readAsDataURL(data);
  // 转换base64是异步的，等待转换完成再去读结果。
  fd.addEventListener("load", () => {
    img.src = fd.result;
  });
}

function byBase64() {
  const fd = new FileReader();
  // data是对应的File文件
  fd.readAsDataURL(data);
  // 转换base64是异步的，等待转换完成再去读结果。
  fd.addEventListener("load", () => {
    img.src = fd.result;
  });
}

Blob

使用 Blob 同样可以被image标签解析出图片的。需要使用 Blob 将 File 转换成 Blob 实例，并通过 URL.createObjectURL将 Blob 转换成能被image识别的图片。

就一个 api URL.createObjectURL，返回值是 url string，格式大概是blob:http://localhost:3000/56a79464-d044-4160-8188-a74f58128786，blob:开头，后面跟着当前网站域名加一个 guid。这个 url 的生命周期和创建它的窗口中的 document 绑定，即刷新页面、关闭页面就会被自动释放了，就失效了。可以当做页面图片回显或者 download link 用，不能用作存储。

这种 URL 形式回显在页面中，会大幅提高性能，尤其是图片非常多的情况。但是要注意释放时机。

function byBlob() {
  // data是对应上传的File文件实例
  const blob = new Blob([data], { type: data.type });
  const url = URL.createObjectURL(blob);
  img.src = url;
}

function byBlob() {
  // data是对应上传的File文件实例
  const blob = new Blob([data], { type: data.type });
  const url = URL.createObjectURL(blob);
  img.src = url;
}

预览本地图片 ​

Base64 ​

Blob ​

预览本地图片

Base64

Blob