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

  • Post author:
  • Post category:其他




选择图片后显示预览图片

在这里插入图片描述



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);
	},
}



版权声明:本文为qq_45415736原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。