图片转 base64，优化用户上传体验

Published:

前言

如图所示，这是传统的上传图片流程，可是这种传统的图片上传流程存在哪些问题呢？

让我们来梳理一下整个流程：

  1. 用户选择一张图片。
  2. 图片通过 Ajax 请求发送到服务器。
  3. 服务器返回一个图片的 URL。
  4. 然后，页面用这个 URL 再发起一个请求来获取图片数据，最后在页面上显示图片。

虽然这种方式没有问题，整个流程也不会出现 BUG，但用户体验就会显得很差。因为用户从选择图片到看到预览图，需要经历很多步骤。如果用户还想对图片进行裁剪，就会面临更多的等待时间，整个过程很不顺畅。

解决方案

为了提高用户体验，我们可以采用一种更高效的方式：直接在用户端显示图片预览，而不需要等待服务器的响应。具体的做法是：在用户选择图片后，立刻在本地显示预览图，并且允许用户进行处理。处理完成后，再通过 Ajax 上传到服务器。这样，用户就不需要再等待图片加载的时间。

我们请求图片 url 地址就是去拿到图片的资源数据。如果说这个数据我在本地就能看到，那我还需要通过服务器去拿吗？就不需要了。要实现这个方案，我们可以使用 Base64 编码。Base64 可以将图片数据直接转化为一个可以在页面上使用的字符串，而不需要依赖服务器。

fileInput.onchange = () => {
  const file = fileInput.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = e => {
    preview.src = e.target.result;
  };
};

在这个代码中，我们使用 FileReader 的 readAsDataURL 方法来将图片文件转化为 Base64 编码的字符串。当文件被成功读取后，onload 事件会被触发，我们可以直接将这个 Base64 编码的字符串设置为图片的 src 属性，这样图片就会立刻显示在页面上。