Element组件el-input选择图片后预览显示

选择图片后显示预览图片

1.加入点击事件和属性id

（1）属性accept：接受上传的文件类型（thumbnail-mode 模式下此参数无效）

<el-form-item label="系统Log" label-width="100px">
	<el-input type="file"  @change="previewImage" accept="image/png, image/jpeg" id="sysLog"></el-input>
</el-form-item>
   <el-form-item label="图片预览" label-width="100px">
   <img v-if="previewUrl" :src="previewUrl" style="width: 100px;height: 100px;">
</el-form-item>

2.在methods中添加previewImage方法。通过id获取元素获取file 文件对象

return {
	previewUrl: '',// 预览图片路径
}
methods: {
	previewImage() {
		//通过id获取元素file文件对象
		let file = document.getElementById("sysLog").files[0];
		this.previewUrl = URL.createObjectURL(file);
	},
}