uniapp实现多图上传

<template>
	<view class="four-img-flex">
		<view class="upload-img">
			<view class="viewimg" v-for="(item,index) in thumbnailUrls" :key="index">
				<view class="delete-picture" @click="delcloudImg(index)"
					style="width: 40rpx;height: 40rpx;position: absolute;top: 0rpx;right: -6rpx;z-index: 999;">
					<u-icon name="guanbi" color="#ccc" size="30" custom-prefix="custom-icon"></u-icon>
				</view>
				<u-image width="100%" height="100%" border-radius="20" mode="scaleToFill" @click="_previewImage(item)" :src="item"></u-image>
			</view>
			<view class="upload-icon" v-if="thumbnailUrls.length < 6" @click="uploadPictures">
				<view class="disflex-center">
					<view class="domeimg">
						<u-icon custom-prefix="custom-icon" name="tupian" size="80" color="#ffffff">
						</u-icon>
					</view>
					<view class="upload-text">上传图片</view>
				</view>
			</view>
		</view>
		<view class="tips-text">共<text
				style="color: #FFCA85;">{{thumbnailUrls.length}}</text>张，还可上传{{9 - thumbnailUrls.length}}张
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				uploadImg:{
					thumbnailUrls:[]
				},
				thumbnailUrls:[]
			}
		},
		methods:{
			delcloudImg(keyVal) {
				this.uploadImg.thumbnailUrls.splice(this.keyVal, 1);
				this.thumbnailUrls.splice(this.keyVal, 1);
			},
			// 预览图片
			_previewImage(image) {
				let imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			uploadPictures() {
				uni.chooseImage({
					count: 6, //最多选择3张图片
					sizeType: ['original', 'compressed'],
					success: (chooseImageRes) => {
						uni.showLoading({
						    title: '上传中'
						});
						this.thumbnailUrls = this.thumbnailUrls.concat(chooseImageRes.tempFilePaths);
						var imageData = this.thumbnailUrls
						const tempFilePaths = chooseImageRes.tempFilePaths;
						//上传个数循环拿到每一个照片的路径，然后放到一个数组中
						for (var i = 0; i < imageData.length; i++) {
							//图片上传
							const uploadTask = uni.uploadFile({
								url: this.$http.baseURL + 'embroidery/aliOss/uploadCommodity', //真实的接口地址
								filePath: tempFilePaths[0],
								name: "file",
								header: {
									Authorization: uni.getStorageSync('_TOKEN') //上传的需要携带的token
								},
								// formData:{   //上传图片需要带的参数
								// 	'orgId': this.mentalStateData.orgId
								// }
								success: (data) => {
									if(data.statusCode == 200){
										uni.hideLoading();
										const back = JSON.parse(data.data);
										var imgUrl = back.data;
										console.log(imgUrl)
										//将图片路径赋值给uploadImg.thumbnailUrls
										this.uploadImg.thumbnailUrls.push(imgUrl);
										console.log(this.uploadImg.thumbnailUrls)
									}else{
										uni.showToast({
										title: '上传失败',
											icon: 'loading'
										})
									}
								}
							})
						}
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.four-img-flex {
		display: flex;
		flex-wrap: wrap;
	
		.upload-img {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 12rpx;
	
			.viewimg {
				width: 140rpx;
				height: 140rpx;
				border: 2rpx solid $color-font-1;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
	
				position: relative::v-deep {
					.u-image {
						border-radius: 20rpx !important;
	
						.u-image__image {
							border-radius: 20rpx !important;
						}
					}
				}
			}
	
			.upload-icon {
				width: 140rpx;
				height: 140rpx;
				background: $color-background-3;
				border: 2px solid $color-font-1;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
	
				.disflex-center {
					.domeimg {
						display: flex;
						justify-content: center;
						align-items: center;
					}
	
					.upload-text {
						font-size: 26rpx;
						color: #F2F2F2;
					}
				}
			}
		}
	}
</style>