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

迷南。 2024-03-16 23:52 93阅读 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 条评论，93人围观）

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

相关阅读

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

选择图片后显示预览图片 ![在这里插入图片描述][f103c9cc69324f93abea7a42a0a34b63.png_pic_center] 1.加入点击事件和

迷南。/ 2024年03月16日 23:52/ 0 赞/ 94 阅读

相关 React使用antd的图片预览组件，点击哪个图片就预览哪个的设置

使用了官方推荐的相册模式的预览，但是点击预览之后，每次都是从图片列表的第一张开始预览，而不是点击哪张就从哪张开始预览：![ed52ba95881f43eba282e090516

绝地灬酷狼/ 2023年10月14日 17:21/ 0 赞/ 80 阅读

相关 element组件中文显示

今天用到element组件分页的时候，看着官方文档是显示共计多少条，然后到我这里就是显示total，感觉很不合适，后来发现，element是可以设置中文显示的，如下图

ゝ一纸荒年。/ 2023年06月14日 10:37/ 0 赞/ 1 阅读

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

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

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

相关 Viewer.js 图片预览插件

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

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

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

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

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

相关图片预览

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

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

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

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

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

相关图片预览

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

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

相关 Vue图片预览插件viewerjs

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

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