前言

在上传图片需要等待一段时间才能预览到图片，对用户体验不是很好，使用base64转码提高用户体验

传统模式

传统的上传模式：用户选择图片，然后发送一个ajax请求将图片上传到服务器，服务器那边就会回馈一个url地址，然后客户端通过设置到图片的src，然后再次发送一个请求，请求这个图片，最后服务器就会回馈这个图片的数据，最终显示到客户端上的预览图

base64-传统模式.png

这种方式是没问题的，但是对用户体验不是很好，因为从用户选图片到看到预览图走的路太长了，那要怎么去优化呢？能不能做成下图效果呢？

base64-优化模式.png

转base64

从用户选择图片后，就能立马看到预览图呢？不用去等待上传结果，而直接看到预览图，回想一下传统的方式，不就是根据url地址去请求图片资源数据吗？url不就是统一资源定位服务，那如果我们在本地就能拿到，还需要去远程拿吗？这时候我们就需要用到data url 顾名思义就是这个url就包含了数据，再进行操作的时候还需要了解一个东西：base64：将任何二进制数据=>纯文本数据

<body>
  <h1>图片转base64</h1>
  <input id="inp" type="file">
  <img src="" id="preview" alt="">
  <script src="./09-图片转base64.js"></script>
</body>

const ipt = document.getElementById("inp") //获取input标签
const preview = document.querySelector("#preview") //获取img标签
ipt.onchange = function () {
  const file = inp.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file) //将图片进行转码
  reader.onload = (e) => {//转码成功后进行的回调
    preview.src = e.target.result;
  }
}

通过次方法可以将图片转成base64格式，然后进行预览