vue中上传图片前进行展示图片

第一种方法，使用FileReader对象

属性

以下是需要使用到的属性，更多信息需自己查阅

属性	描述
FileReader.result	返回文件的内容。只有在文件操作读取完成后，属性才有效，返回的数据格式根据读取方式决定

方法

示例中使用的FileReader读取方法

方法名	描述
FileReader.readAsDataURL(blob)	读取Blod中的内容。完成后，result属性中将包含一个data:URL格式的Base64字符串表示文件的内容

事件

示例中使用的事件

事件	描述
FileReader.onload	处理load事件，事件在读取完成时触发

点击这里，获取更多属性，方法，事件，请参考这位大佬的文章

示例代码

HTML代码

<input type="file"  @change="change" ref="file">
//change是文件选择改变时，触发的事件

js代码

change(){
	let files = this.$refs.file.files//获取File Objects
    let reader = new FileReader();
    reader.readAsDataURL(files[0])//将第一个文件对象作为参数
    reader.onload=()=>{
        console.log(reader.result)
        this.url = reader.result
    }
}

输出示例（因为所选图片十分大，导致Base64格式文本很多，很大，所以我不是很推荐）

第二种方式URL.createObjectURL()方法

这里就直接放代码了，具体和FileReader的区别，请参考这篇文章

示例代码

HTML代码

<input type="file"  @change="change" ref="file">
//作用和前面一样

js代码

change(){
	let files = this.$refs.file.files
	let newimgdata = URL.createObjectURL(files[0]);
    console.log(newimgdata)
}

输出示例(输出的内容短小精悍，使用和上面同一张图片，从整体感受上来说，该方法效率会更高，我比较推荐使用)