fny-ugd-palace-uniapp/components/c-form-image-upload/c-form-image-upload.vue

<template>
	<view class="content">
		<view class="img-rpeview" v-for="(img, index) in imgs" @click="preview(index, imgs)">
			<image :src="img" mode="aspectFill"></image>
			<view class="close-tab" @click.stop="remove(index)">
				<u-icon name="close" color="#FD8701" size="24rpx"></u-icon>
			</view>
		</view>
		<view class="img-add" @click="choiceImg" v-if="imgs.length < 3">
			<u-icon name="plus" color="#d7d7d7" size="62rpx"></u-icon>
			<text>{{imgs.length == 0 ? '图片上传' : '图片补充'}}</text>
		</view>
		<w-compress ref='wCompress' />
	</view>
</template>

<script>
	export default {
		name:"c-form-image-upload",
		data() {
			return {
				imgs: [],
			};
		},
		props: {
			count: {
				type: Number,
				default: 3
			},
			value: {
				type: Array,
				default() {
					return []
				}
			}
		},
		computed:{
			
		},
		watch: {
			value(val){
				this.imgs = val
			}
		},
		mounted() {
			this.imgs = this.value
		},
		methods: {
			choiceImg() {
				let that = this;
				that.$tools.chooseImage(this.count - this.imgs.length).then(res => {
					 this.$refs.wCompress.start(res).then(res => {
						this.$tools.uploadImageAll(res).then(res => {
							this.imgs = this.imgs.concat(res)
							this.$emit('input', this.imgs);
						})
					})
				});
			},
			remove(index) {
				this.imgs.splice(index, 1)
				this.$emit('input', this.imgs);
			},
			preview(index, urls) {
				this.$tools.previewImage(urls, index)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-top: 0rpx;
		display: flex;
		flex-wrap: wrap;
		.img-rpeview{
			position: relative;
			width: 144rpx;
			height: 144rpx;
			image{
				width: 100%;
				height: 100%;
			}
			margin-right: 20rpx;
			.close-tab{
				position: absolute;
				right: -15rpx;
				top: -15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx;
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				color: #FD8701;
				z-index: 2;
				border: 1px solid #FD8701;
				box-sizing: content-box;
				background-color: #fff;
			}
		}
		.img-add{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 144rpx;
			height: 144rpx;
			background-color: #fff;
			box-shadow: 0 0 14px 1px #eaeaea;
			font-size: 19rpx;
			text{
				margin-top: 12rpx;
				color: #cfcfcf;
			}
		}
	}
</style>