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

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>

运行结果：