qzw_xcx/component/uploadImage.vue

<template>
	<view class="cell-pd">
		<view class="uni-uploader">
			<view class="uni-uploader-body">
				<view class="uni-uploader__files">
					<block v-for="(image,index) in imageList" :key="index">
						<view class="uni-uploader__file">
							<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
						</view>
					</block>
					<view v-if="imageList.length != 3" class="uni-uploader__input-box deepHeight">
						<view class="uni-uploader__input" @tap="chooseImage"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				imageList:[],
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				countIndex: 1,
				count: [1, 2, 3]
			}
		},
		onUnload() {
			    this.imageList = [],
				this.sourceTypeIndex = 2,
				this.sourceType =  ['album'],
				this.sizeType = ['original', 'compressed'],
				this.countIndex = 1;
		},
		methods: {
			chooseImage() {
				if (this.imageList.length === 3) {
					// let isContinue = await this.isFullImg();
					// console.log("是否继续?", isContinue);
					// if (!isContinue) {
					// 	return;
					// }
					return;
				}
				uni.chooseImage({
					sourceType: this.sourceType,
					sizeType: this.sizeType,
					count: this.imageList.length + this.count[this.countIndex] > 3 ? 3 - this.imageList.length : this.count[this.countIndex],
					success: (res) => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
						        uni.uploadFile({
						            url: '', 
						            filePath: tempFilePaths[0],
						            name: 'file',
						            formData: {
						                'user': 'test'
						            },
						            success: (uploadFileRes) => {
						                console.log(uploadFileRes.data);
						            }
						        });
					}
				})
			},
		}
	}
</script>

<style>
	.deepHeight {
		height: 108upx;
		width: 108upx;
	}
	.uni-uploader__file {
		width: 30%!important;
	}
</style>