guosen-ldt-shop/components/uploadimg/uploadImg.vue

<template>
	<view class="">
		<view style="position: relative;" class="uploadImg" @click="chooseImage">
			<view v-if="!model">
				<image style="width: 60rpx;height: 60rpx;margin-bottom: 20rpx;" :src="addImg"></image>
				<text>{{title}}</text>
			</view>
			<image class="img" v-else :src="model"></image>
			<image v-if="!model && enableImg" style="height: 160rpx;width: 90%;position: absolute" :src="bgImg">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title:String,
			//图标
			addImg: {
				type: String,
				default: 'https://guosen-bucket-ldt.obs.cn-south-1.myhuaweicloud.com:443/723e0e52706a46159203f2d243873485-t5yIWXtGE8l04314394a1700881f3d4c73f10db523dd.png'
			},
			//是否开启背景图片
			enableImg: Boolean,
			//背景图片
			bgImg: {
				type: String,
				default: 'https://guosen-bucket-ldt.obs.cn-south-1.myhuaweicloud.com:443/704abb0fbe654e95ae1f57a458dc5f92-FPFbZdIYvEv4be3706cc937d3313d3674ac283ae53fe.png'
			},
			dataName: String,
			model:String
		},
		data() {
			return {

			};
		},
		onLoad() {

		},
		methods: {
			chooseImage() {
				this.$emit('click', this.dataName)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.uploadImg {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx;

		view {
			z-index: 10;
			border: 4rpx dashed #e1e1e1;
			width: 480rpx;
			height: 300rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.icon {
			width: 70rpx;
			height: 70rpx;
		}

		.img {
			width: 480rpx;
			height: 300rpx;
		}

		text {
			color: #999;
		}
	}
</style>