uniapp封装多图上传

效果图：

组件：

<template>
	<view class="unload-image">
		<view class="img-section">
			<text class="title">{{imgTitle}}(最多{{Images.length}}/{{maxlenthImg}}张)</text>
			<view class="image-content">
				<view class="list-item" v-for="(item,key) in imgList">
					<image class="imgs" :src="imgList[key]" mode="aspectFill" @click="refundPicPreView(item)" />
					<text class="iconfont cuIcon-close closePic" @click.stop="deleteImg(key)"></text>
				</view>
				<view class="list-item" @click="uploadImg" v-if="imgList.length < maxlenthImg">
					<i class="iconfont cuIcon-cameraadd"></i>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'uploadImgs',
		props: {
			maxlenthImg: {
				type: Number,
				default: 1
			},
			imgTitle: {
				type: String,
				default: "上传图片"
			},
		},

		data() {
			return {
				Images: [],
				imgList: [],
				isChoose: false,
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			uploadImg() {
				uni.chooseImage({
					count: this.maxlenthImg - this.Images.length, // 选择数量限制
					sizeType: ['original', 'compressed'], // 原图、压缩图
					sourceType: ['album', 'camera'], // 相册、拍照选择
					success: async (res) => {
						let tempFilePaths = res.tempFiles;
						let imgInfo = res.tempFilePaths;
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(imgInfo)
						} else {
							this.imgList = imgInfo
						}
						for (var i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: this.Constant.baseUrl + '/app/member/toUpload',
								filePath: tempFilePaths[i].path,
								name: 'file',
								formData: {
									memberId: this.userInfo.id,
								},
								success: res=> {
									let Upres = JSON.parse(res.data)
									if (Upres.code == 0) {
										this.Images.push(Upres.data);
									}
								},

							});
						}
						setTimeout(() => {
							this.$emit('imageChange', {
								images: this.Images
							})
						}, 200)
					}
				})
			},
			//删除图片
			deleteImg(key) {
				uni.showModal({
					title: '提示',
					content: '您确定要删除这张图片吗',
					success: res => {
						if (res.confirm) {
							this.Images.splice(key, 1);
							this.imgList.splice(key, 1);
							setTimeout(() => {
								this.$emit('imageChange', {
									images: this.Images
								})
							}, 200)
						}
					}
				})
			},
			// 预览图片
			refundPicPreView(currentImage) {
				uni.previewImage({
					current: currentImage,
					urls: this.imgList
				})
			},
			// showToast 提示框
			showToast(msg) {
				uni.showToast({
					title: msg,
					icon: 'none',
					position: 'top'
				})
			}
		},
	}
</script>
<style scoped lang="scss">
	.unload-image {

		.img-section {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 30rpx 20rpx;

			.image-content {
				display: flex;
				justify-content: start;
				align-items: center;
				flex-wrap: wrap;
				padding: 30rpx 0;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}

				.list-item {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 200rpx;
					height: 200rpx;
					border: 1rpx solid $border-color-dark;
					border-radius: 20rpx;
					background-color: $page-color-light;
					margin-bottom: 20rpx;
					margin-right: 20rpx;

					&:nth-child(3n+3) {
						margin-right: 0;
					}

					.iconfont {
						margin: 8rpx;
						font-size: 48rpx;
						font-weight: bold;
						color: $font-color-light;
					}

					.icon-camera {
						font-size: 48rpx;
						color: $font-color-disabled;
					}

					.tips {
						font-size: 28rpx;
						color: $font-color-light;
					}

					.closePic {
						position: absolute;
						right: 0;
						top: 0;
						z-index: 2;
					}
				}
			}
		}
	}
</style>

页面引入：

<template>
	<view class="container">
		<uni-upload-image :maxlenthImg="1" imgTitle="上传门头照" @imageChange="imgListChange" ></uni-upload-image>
	</view>
</template>
<script>
import uniUploadImage from '@/components/uni-upload-image/uni-upload-image.vue'
	export default {
		components:{
			uniUploadImage
		},
		data() {
			return {
				imgID:'',//获取到的图片id
			}
		},
		methods: {
			imgListChange(data){
				this.imgID = data.images;
			},
		}
	}
</script>

结束。