利用FileReader API预览图片

需求

在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