使用data_url预览图片

一、前言

我们选择了一张图片进行上传，服务器会保存图片，然后返回给我们一个url访问地址，我们前端拿到这个url地址赋值给image元素，随后我们又要发送一个请求传递一个url给服务器，服务器再返回给我们图片数据，我们才能预览图片

从上传图片到预览图片，需要我们发送两个网络请求，我们为什么不发送一个请求，本地去处理预览呢?

因为发送网络请求，网络很好的情况下，我们的等待时间会短一些，相反来说呢，所以，传统的预览图片逻辑等待时间会比较长一些，需要发送两次请求，就比如，用户点击按钮上传之后，需要等待一段时间，才可以看到预览图，我们发现现在很多站点都是上传完之后，就可以立马看到预览图了

二、data_url

接下来，我们来实现一下图片预览

就比如我们上述的代码，我们需要给src赋值一个url地址，这个url就是统一资源定位符，是需要定位资源来获取资源数据的，我们如果不发送请求拿数据，我们其实可以直接将数据写进url地址里面，这时候，就要涉及data url了，data url也是一个标准格式的字符串，大家可以搜索以下链接进行阅读

https://en.wikipedia.org/wiki/Data_URI_scheme

我们阅读完介绍之后，我们可以明白它的组成是上面这个格式

data表示这个字符串是带有资源数据的，content/type表示资源的类型，就是通过一个字符串来表达这个资源的类型，比如我们常见的有text/html，text/css，text/javascript，image/png，application/json等等，最后一个部分就是资源的数据了

我们来尝试写一个资源的data_url

在上面的格式中，后面的资源是base64编码格式，我们可以利用base64将任意数据格式，通常是二进制数据，转换为对应的文本，这个过程其实就是base64编码

我们后面的alert("123")，不是base64格式啊，我们可以通过btoa函数，将alert("123")编码成base64格式

想必大家对于data_url就了解了，接下来，我们将data_url运行到图片身上

逻辑其实就是，用户点击上传图片之后，我们只需要将该图片的二进制数据在本地读出来转成base64，用base64形成data_url，最终赋值给img元素的src属性身上即可，这个时候，用户就可以立马看到预览图，不需要经过任何的网络请求

三、示例

我们现在需要准备两个html元素

给inp注册change事件，来拿到读取的文件

我们最后，需要做的就是将文件的二进制数据读成一个data_url，怎么来读呢，我们可以创建一个文件读取器

读取器中有一个方法，可以帮助我们读取成data_url，但是读取是异步的，所以我们需要等待读取完成

我们打印一下读取结果

我们可以发现读取的结果就是一个data_url

接下来，我们将读取到的结果赋值给src属性身上

我们这样发现这样预览图片，不涉及到任何的网络通信，就可以实现快速的图片预览，提高了用户的体验

四、最后

本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞收藏关注✨，一起加油☕