VUE 使用 Element-UI组件el-upload上传图片预览

最新推荐文章于 2025-05-05 14:34:05 发布

原创最新推荐文章于 2025-05-05 14:34:05 发布 · 3.4k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui #javascript

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Vue项目中利用Element UI的el-upload组件实现图片的本地预览功能。通过将auto-upload属性设为false，并在on-change事件中定义getLocalImg方法来生成用于预览的本地URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述
上传后预览

在el-upload组件中，把auto-upload设置为false，不会执行自动上传，给on-change一个触发事件getLocalImg，在getLocalImg方法中用于生成可用于本地预览的url

代码如下：

html


<template>
  <div>
  	<el-form>
  		<el-form-item class="relese_nameP" label="LOGO：">
  			<el-upload 
  				action="https://jsonplaceholder.typicode.com/posts/" 
  				:limit="1" 
  				:auto-upload="false" 
  				:on-change="getLocalImg">
				<div class="logo_upload_xuan">
					<i slot="default" class="el-icon-circle-plus-outline"></i>
					<span>选择图片</span>
				</div>
			</el-upload>
			<div class="logo_img">
				<div v-if="isHidden" class="logo_img_title">LOGO</div>
				<img v-else :src="releseList.logo" />
			</div>
  		</el-form-item>
    </el-form>
  </div>
</template>

js

<script>
	export default {
		data() {
			return {
				releseList:{
					logo:''
				},
				isHidden:true
			}
		},
		methods: {
			getLocalImg(event){
				// 获取上传图片的本地url，用于上传前的本地预览
				let url = '';
				if (window.createObjectURL != undefined) {
					url = window.createObjectURL(event.raw);
				} else if (window.URL != undefined) {
					url = window.URL.createObjectURL(event.raw);
				} else if (window.webkitURL != undefined) {
					url = window.webkitURL.createObjectURL(event.raw);
				}
				this.releseList.logo = url;
				this.isHidden = false;
			}
		}
	}
</script>

css

<style lang="scss">
.relese_nameP{
	display:flex;
	.logo_upload{
		.logo_upload_xuan{
			width:250px;
			height:30px;
			border:2px solid #DCDFE6;
			display:flex;
			justify-content:center;
			i{
				font-size:20px;
				color:#666;
				margin:5px 0;
			}
			span{
				color:#666;
				line-height:30px;
				margin-left:10px;
			}
		}
		.logo_img{
			width:250px;
			height:250px;
			border:4px dashed #DCDFE6;
			margin-top:20px;
			display:flex;
			flex-direction:column;
			justify-content:center;
			align-items:center;
			img{
				width:250px;
				height:250px;
				display:block;
			}
		}
	}
}
</style>