图片预览

前端实现图片预览的方式有两种：

通过file生成一个base64编码实现预览；
实现一个Blob构造url地址实现预览;
通过File构造url地址实现预览。

下面讲述两者的实现：

base64预览

借助于FileReader这个内置类，将选中的图片文件转换为我们想要的base64的数据格式。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片本地预览示例</title>
  </head>
  <body>
    <h3>图片本地预览示例</h3>
    <input type="file" accept="image/*" onchange="loadFile(event)" />
    <img id="previewContainer" />

    <script>
      const loadFile = function (event) {
        const reader = new FileReader();
        reader.onload = function () {
          const output = document.querySelector("#previewContainer");
          output.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
      };
    </script>
  </body>
</html>

图片地址最终为：data:image/png;base64,iVBORw0KGgoAAAANSUhEU...U5ErkJggg==,很长的一段字符串

为啥这样可以实现嘞？接着往后看。

Blob地址预览

这个方法也借助了FileReader，将图片转换为ArrayBuffer的值，然后通过Blob去构建一个src链接即可。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片本地预览示例</title>
  </head>
  <body>
    <h3>图片本地预览示例</h3>
    <input type="file" accept="image/*" onchange="loadFile(event)" />
    <img id="previewContainer" />

    <script>
      const loadFile = function (event) {
        const reader = new FileReader();
        reader.onload = function () {
          const output = document.querySelector("#previewContainer");
          const blob = new Blob([fileReader.result]);
          const src = URL.createObjectURL(blob);
          output.src = src;
        };
        reader.readAsArrayBuffer(event.target.files[0]);
      };
    </script>
  </body>
</html>

图片地址最终为：blob:http://127.0.0.1:5501/d3bad4b4-d802-42fe-8773-11e5e39d8b04

这里为啥也可以嘞，哎，这就到了本文的FileReader类了。

File地址预览

采用URL.createObjectURL这个函数去构造一个url地址，它允许 Blob 或 File 对象用作图像或者下载二进制数据链接等的 URL 源。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片本地预览示例</title>
  </head>
  <body>
    <h3>图片本地预览示例</h3>
    <input type="file" accept="image/*" onchange="loadFile(event)" />
    <img id="previewContainer" />

    <script>
      const loadFile = function (event) {
        const output = document.querySelector("#previewContainer");
        output.src = URL.createObjectURL(event.target.files[0]);
      };
    </script>
  </body>
</html>

FileReader

FileReader可以异步读取File或者Blob的文件或者数据。

属性和方法：

fileReader.error：读取文件时发生的错误；
fileReader.readyState：读取文件这个过程的状态，empty-0-还没加载，loading-1-正在加载，done-2-全部完成；
fileReader.result：文件的内容，只有读取文件完成了才有效，一般用在onload中；
fileReader.onabort：读取操作被中断时触发；
fileReader.onerror：读取失败时触发；
fileReader.onload：读取完成时触发；
fileReader.onloadstart：开始读取时触发；
fileReader.onloadend：读取结束触发，不论失败与否；
fileReader.onprogress：读取过程中触发；
fileReader.abort：中止读取操作；
fileReader.readAsArrayBuffer：将读取的数据输出为ArrayBuffer格式；
fileReader.readAsBinaryString：将读取的数据输出为原始二进制数据；
fileReader.readAsDataURL：将读取的数据输出为base64编码；
fileReader.readAsText：将读取的数据输出为字符串。

FileReader支持DOM2级事件绑定。

Blob和ArrayBuffer

关于这个，请移步至大佬的详解：阿宝哥玩转前端二进制

你还不会图片预览？