更高效的图片预览方案

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

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

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

更高效的图片预览方案_第1张图片

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

还有一个场景是用户要上传头像,一般是先拿到预览图,然后对它进行裁剪,裁剪完成之后再进行网络上传。更高效的图片预览方案_第2张图片

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])
}

你可能感兴趣的:(前端,javascript,css,vue.js)