选择图片后显示预览图片
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 版权协议,转载请附上原文出处链接和本声明。