首先说一下会用到几个知识点php
1.
event.target.files[0]html
获取的是上传的图片的一些参数以下图:前端
能够本身依次打印看看vue
console.log(event, event.target, event.target.files, event.target.files[0])json
2.api
HTML5中FileReader数组
在FileReader出现以前,前端的图片预览是这样实现的:
把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性。浏览器
这种方法的缺点是:
必需要先把图片上传到服务器。若是上传的图片很大,而网速又很慢,这就须要等待好久预览图片才会显示出来了,若是用户预览图片后发现不太满意,想从新选择一张图片,这时候还要把已经上传到服务器上的图片给删除掉。服务器
有了HTML5的FileReader对象之后,预览图片变得简单多了,再也不须要后台的配合,这种方法的思路是:app
经过FileReader.prototype.readAsDataURL()
方法把图片文件转成base64编码,而后把base64编码替换到预览图片的src属性便可。
let that = this;
let file= event.target.files[0];
let reader= newFileReader();//调用reader.readAsDataURL()方法,把图片转成base6