本地文件预览

# 问题

很多时候，我们在需要用户上传文件如 图片，音视频等的时候，用户有预览文件以免发错的需求，在文件管理器里面预览显示会增加用户的操作量，

要在 web 上预览本地文件，我们就需要把文件变成 web元素，而关联 web元素 和文件的东西，就是src属性。所以我们实际上是需要拿到文件的路径

单显然，为了用户数据安全，浏览器不会让我们拿到文件的存放路径。无论是通过文件选择器，还是拖拽或者粘贴拿到的file都是对象，并且不包含路径信息。

解决办法就是，把对象转换成一个可以被 src属性接受并且能够被浏览器解析的字符串。答案就是base64，经过测试，图片和视频是没有问题的，音频没有测试，但理论上应该也没有问题。

# base64

Base64 编码方案通常用于对二进制数据进行编码，以便在只能处理 ASCII 文本（或某些 ASCII 的超集，仍不接受任意二进制数据）的媒体上进行存储或传输。这确保了数据在传输过程中保持不变。

Base64 - MDN Web 文档术语表：Web 相关术语的定义 | MDN

简单来说，通常的 src属性 中传入的是文件的路径，而转换成 base64后，这个字符串本身就包含了文件数据。

那如何将文件对象转换成字符串格式的 base64 呢？答案就是通过 FileReader 对象

 

# FileReader

FileReader - Web API | MDN

第一步是获取文件对象

• 通过 input 对象的 change事件 的事件对象，可以得到文件对象
• 通过 拖拽的 drop事件 的事件对象，可以得到文件对象
• 通过 paste事件 的事件对象，同样可以拿到文件对象。

有没有其他方法我就不知道了，三板斧足以。

第二步，创建 FileReader 对象 reader，并且转换对象并拿到 base64 数据

第三步，获取货创建元素节点，将 base64 赋值给其 src 属性。