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

效果图

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

在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>
  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值