传统的图片预览方式是什么样子的呢？

首先是用户选择一张图片，通过ajax上传到服务器，然后服务器返回一个访问url

然后给img标签的src属性设置这个访问url。

那这就会有一个问题，用户为什么要先网络上传上去再预览呢，我本地直接预览就好了呀，为何要多此一举呢，而且还浪费性能。如果这个图片很大的话，那网络上传的时间也会很长，这对用户体验是很不好的。

还有一个场景是用户要上传头像，一般是先拿到预览图，然后对它进行裁剪，裁剪完成之后再进行网络上传。

const inp = document.querySelector('input');
inp.onchange = function() {
    const reader = new FileReader();
    reader.onload = function (e) {
     	//给img标签的src赋值
        preview.src = e.target.result
    }
    reader.readAsDataURL(this.files[0])
}