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

迷南。 2024-03-16 23:52 25阅读 0赞

## 选择图片后显示预览图片 ##

![在这里插入图片描述][f103c9cc69324f93abea7a42a0a34b63.png_pic_center]

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

![在这里插入图片描述][e212d2d48e274a9bb570ccc2153ec45c.png_pic_center]  
（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);
    	},
    }

[f103c9cc69324f93abea7a42a0a34b63.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/aab3f93cced143f4b16e69f9959aef34.png
[e212d2d48e274a9bb570ccc2153ec45c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/633d21a1f48d45b3ba76f0b3931e700e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 rich-text组件不支持预览图片，曲线救国方式

<rich-text nodes="{ {htmlVal}}" bindtap="test"></rich-text> test:functio

刺骨的言语ヽ痛彻心扉/ 2023年06月06日 03:39/ 0 赞/ 81 阅读

相关 html选择本地图片即时预览

最近在做一个.net mvc的网站，想让用户在网页中上传图片的过程中预览图片，本以为很简单，以为可以直接在html中解决，百度了很多才发现貌似挺麻烦，综合一些大神的回答，

谁践踏了优雅/ 2022年09月22日 11:44/ 0 赞/ 233 阅读

相关 Viewer.js 图片预览插件

一、简介 Viewer.js 是一款强大的图片查看器。 Viewer.js 有以下特点：支持移动设备触摸事件支持响应式支持放大/缩小支

本是古典何须时尚/ 2022年09月04日 06:57/ 0 赞/ 366 阅读

相关点击按钮预览图片，可以预览多组图片（vue+element）

elementUI 提供的 Image 组件直接可以点击图片查看图片预览，我的需求也是查看预览图片，但是有很多小的区别！ > 1、点击按钮预览图片； > 2、可以预览多个

た入场券/ 2022年08月30日 15:59/ 0 赞/ 945 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 407 阅读

相关 HTML选择图片直接预览效果

直接上代码 <!DOCTYPE html> <html> <head> <meta name="viewport" cont

超、凢脫俗/ 2022年05月30日 04:18/ 0 赞/ 215 阅读

相关 Vue 组件库 heyui@1.18.0 发布，新增地址选择、图片预览组件

新增 CategoryPicker 新增组件 CategoryPicker，地址级联组件的最佳方案。 <CategoryPicker :option="o

骑猪看日落/ 2022年02月13日 12:19/ 0 赞/ 151 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 597 阅读

相关 Vue图片预览插件viewerjs

GitHub地址：[https://github.com/fengyuanchen/viewerjs][https_github.com_fengyuanchen_viewer

灰太狼/ 2021年12月16日 08:13/ 0 赞/ 989 阅读

相关微信小程序选择图片和预览图片

选择图片视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage(\{\}) 此方法是用来选择图片的方法,具体使用

素颜马尾好姑娘i/ 2021年09月17日 00:28/ 0 赞/ 591 阅读