图片预览的两种实现方式

做用户头像上传等类似功能的时候，经常会有预览选中图片的需求。在这里介绍两种实现预览的方式。

1.转化为base64格式

通过一种异步文件读取机制FileReader实现。具体步骤是：

1. 创建FileReader对象
2. 调用readAsDataURL函数读取文件内容
3. 监听FileReader创建的实例对象的onload事件
4. 通过e.target.result获取读取到的结果，值是base64格式的字符串
5. 将读取到的结果赋值给img标签的src属性

实现代码：

  <input type="file">
  <img src="./avatar.jpg" alt="">
  <script>
    const img = document.querySelector('img')
    document.querySelector('input').addEventListener('change',function(e){
      // 获取选择的文件
      const fileList = e.target.files
      // 创建FileReader实例对象
      const reader = new FileReader()
      // 调用readAsDataURL函数读取文件内容
      reader.readAsDataURL(fileList[0])
      // 监听FileReader创建的实例对象的onload事件
      reader.addEventListener('load', () => {
        // 通过e.target.result获取读取到的结果，值是base64格式的字符串
        console.log(reader.result)
        img.src = reader.result
      })
    })
  </script>

运行结果：

2.使用内置的URL对象

使用内置的URL对象的createObjectURL方法能将图片对象存储到内存中，并返回一个地址。
具体实现步骤：

1. 定义一个变量接收URL.createObjectURL(图片对象)返回的url地址
2. 将这个变量存储的url地址赋值给img标签的src属性

  <input type="file">
  <img src="./avatar.jpg" alt="">
  <script>
    const img = document.querySelector('img')
    document.querySelector('input').addEventListener('change',function(e){
      // 获取选择的文件
      const fileList = e.target.files
      // 定义一个变量接收URL.createObjectURL(图片对象)返回的url地址
      const url = URL.createObjectURL(fileList[0])
      // 将这个变量存储的url地址赋值给img标签的src属性
      img.src = url
    })
  </script>

运行结果：