需求

在 Web 应用程序中，上传图片前进行预览是比较常见的需求。在老式浏览器中，必须先将图片上传至服务器，获取实际链接后嵌入方可预览。随着浏览器 API 的不断丰富，现在利用 FileReader 可以做到图片上传之前就在页面进行预览，提高用户体验。

FileReader & File & Blob

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区), 要读取的文件可以是 File 对象，数据可以是 Blob 数据。

MDN FileReader

利用 Html file input 表单，我们能获取到对应选择的计算机文件系统文件的 File 对象。

MDN File.

而一个 Blob 对象表示一个不可变的, 原始数据的类似文件对象，File 接口就是基于 Blob。

MDN Blob

示例

下面示例了一个图片上传预览：

在图片上传之后，可以看到img的 src 替换为了data:image/png;base64,.....类似的字符，该字符包含了完整的图片数据，如果图片较大，该字符串会相应的非常长。

更进一步

为了简化预览的图片链接，会需要用到URL对象的createObjectURL方法，该方法会创建一个简化的链接，实际是指向一个包含了真实数据的对象。此时的链接会类似blob:https://fiddle.jshell.net/39ebabeb-8cdb-4e36-bc38-3fe05f9cb757。