zhxy-desk/components/uploadImg.vue

<template>
	<view class="upload">
		<view @click="previewImage(index)" v-for="(item,index) in list" :key="index" class="upload-item">
			<image style="width: 100%;height: 100%;" :src="item" mode=""></image>
			<view @click.stop="deleteImg(item,index)" class="upload-item-icon">

				<uni-icons type="closeempty" size="20" color="#fff"></uni-icons>
			</view>
		</view>
		<view v-if="this.list.length < 9" @click="addImg"
			style="display: flex;justify-content: center;align-items: center;" class="upload-item">
			<uni-icons type="plusempty" size="40" color="#999"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		watch: {

		},
		data() {
			return {

			}
		},
		methods: {
			addImg() {
				//_self为在export default外面作用域外定义的全局变量,用来等价代换

				//第一步:打开手机相册或者文件管理器选择文件
				uni.chooseImage({
					count: 9, //允许上传一张图片
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						//获得选择好的文件,就算只有一个文件也是数组
						const tempFilePaths = res.tempFilePaths;
						this.$emit('change', res.tempFilePaths)

					}
				})
			},
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.list
				});
			},
			deleteImg(item, index) {
				this.$emit('deleteImg', index)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.upload {
		width: 100%;
		display: flex;

		flex-wrap: wrap;
		 
	}

	.upload-item {
		width: 200rpx;
		height: 200rpx;
		border: 1px solid #ccc;
		border-radius: 5px;
	      margin-right: 4rpx;
		margin-bottom: 36rpx;
		position: relative;
        
		.upload-item-icon {
			position: absolute;
			right: -20rpx;
			top: -20rpx;
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			background-color: limegreen;
			border-radius: 50%;
			z-index: 1;
		}
	}

	.upload-item:nth-child(3n) {
		margin-right: 0;
	}
</style>