uniapp 递归上传图片

html

<template>
	<view class="container">
		<view class="text f-32 color-3 d-flex a-center j-between">
			<view>图片</view>
			<view class="f-28">{{goodspic.length}}/9</view>
		</view>
		<view class="pictures d-flex">
			<view class="ul d-flex" v-if="goodspic.length != 0">
				<view class="li" v-for="(item,index) in goodspic" :key="index">
					<image src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" mode=""></image>
					<view class="icon-del-box" @click="handleDel(item,index)">
						<view class="icon-del"></view>
						<view class="icon-del rotate"></view>
					</view>
				</view>
			</view>
			<view class="pictures_wrapper" @click="handlePictures" v-if="goodspic.length < 9">
				<uni-icons type="plusempty" color="#707070"></uni-icons>
			</view> 
		</view>
	</view>
</template>

js

<script>
	export default {
		data() {
			return {
				picGoods: [],
				goodspic: [],
				UploadUrl: [],
				thumbnail: '',
			}
		},
		methods: {
			// 上传图片
			handlePictures(){
				let token = '21839asd1489s490asdsad14sd014d01AS4'; // 仅为示例，非真实的
				let url = 'https://www.example.com/upload'; // 仅为示例，非真实的接口地址
				let that = this;
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						let arr = res.tempFilePaths
						let i = 0; 
						let length = arr.length;
						let upload = () => {
							uni.uploadFile({
								url : url,
								header: {
									'X-Token': token //自定义请求头信息
								},
								filePath: arr[i],
								name: 'pic',
								success: (uploadFileRes) => {
									//图片显示赋值
									const back = JSON.parse(uploadFileRes.data);
									//图片显示赋值
									let backArr = back.data.pic;
									if(that.thumbnail==''){ //缩略图
										that.thumbnail = backArr;
									}else{
										that.thumbnail = that.thumbnail +";" +backArr;
									}
									that.picGoods.push(backArr)
									console.log('picGoods',picGoods)
									let detailUrl = that.UploadUrl.substr(0, that.UploadUrl.length - 1) + back.data.pic;
									that.goodspic.push(detailUrl)
									console.log('goodspic',goodspic)
									//如果还有照片，继续上传
									i++;
									if (i < length) {
										upload();
									}
								},
								fail:(err)=>{
									console.log(err)
								}
							});                    
						};
						upload();
					},
					error:(err)=>{
						console.log('选择图片错误', err)
					}
				});

			},
			// 删除
			handleDel(val,idx){
				this.goodspic.splice(idx, 1)
			},
		}
	}
</script>

css

<style scoped lang="less">
.f-32{
	font-size: 32rpx;
} 
.color-3{
	color: #333;
} 
.d-flex{
	display: flex;
} 
.a-center{
	align-items: center;
} 
.j-between{
	justify-content: space-between;
}
.container{
	padding: 40rpx 32rpx;
	.text{
		padding-bottom: 30rpx;
	}
	.pictures{
		flex-wrap: wrap;
		.pictures_wrapper{
			width: 160rpx;
			height: 160rpx;
			border-radius: 8rpx;
			border: 1px solid #DDDDDD;
			background-color: #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.ul{
			margin-left: 20rpx;
		}
		.li{
			width: 160rpx;
			height: 160rpx;
			border-radius: 8rpx;
			overflow: hidden;
			position: relative;
			margin-right: 80rpx;
			margin-bottom: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
			.icon-del-box{
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				right: 0;
				height: 52rpx;
				width: 52rpx;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 2;
				transform: rotate(-45deg);
				.icon-del{
					width: 30rpx;
					height: 4rpx;
					background-color: #fff;
					border-radius: 4rpx;
				}
				.rotate {
					position: absolute;
				    transform: rotate(90deg);
				}
			}
		}
	}
}
</style>