假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片？

首先得到文件数据，获得文件数据是从files集合中获取。

使用window.URL.createObjectURl方法对选择的图片数据（可以勉强理解为input的value）生成一个blob对象路径

window.URL.createObjectURl 的实现方法：

 

            document.getElementById('fileInput').addEventListener('change', event => {
                const file = event.target.files[0]
                document.querySelector("img").src = window.URL.createObjectURL(file)
            })

 

使用 FileReader 读取器，FileRader 读取文件.可分为四步；

1. 创建 FileReader 对像；
2. 调用 readAsDataURL 方法读取文件；
3. 调用 onload 事件监听。因为我们需要拿到完整的数据，但我们又不知道文件何时读完，所以需要第三步监听；
4. 通过 FileReader 的 result 属性拿到读取结果。

 

document.getElementById('fileInput').addEventListener('change', event => {
                const file = event.target.files[0]
                const reader = new FileReader()
                reader.onload = function (e) {
                    document.querySelector("img").src = e.target.result // e.target.result 就是 Base64 数据
                }
                reader.readAsDataURL(file) // 以 Base64 格式读取
            })