chelvc-custom/src/pageMerchant/mineModule/certification/components/ImgsUpload.vue

<template>
	<view class="imageUpload">
		<view class="images-box" @click="handlerUploadImg" v-if="fileList.length">
			<image class="upd-img" v-for="(item, index) of fileList" :key="index" :src="item" mode="aspectFill"></image>
		</view>

		<view class="images-box" @click="handlerUploadImg" v-else>
			<image src="/static/upload.jpg" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: '',
			},
			imageList: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				uploadCount: 0,
				fileList: [],
			};
		},
		onLoad(option) {},
		onShow() {

		},
		mounted() {

			this.fileList = this.imageList.split(',')
		},
		created() {},
		methods: {
			// 上传头像
			async handlerUploadImg() {
				try {
					const res = await uni.showActionSheet({
						itemList: ['拍照', '从相册选择'],
					});
					if (res.tapIndex === 0) {
						// 用户选择拍照
						this.takePhoto();
					} else if (res.tapIndex === 1) {
						// 用户选择从相册选择
						this.chooseImage();
					}
				} catch (error) {
					console.error(error);
				}
			},
			// 拍照
			takePhoto() {
				uni.chooseImage({
					sourceType: ['camera'],
					count: 1 - this.uploadCount,
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						// 调用上传图片的方法
						tempFilePaths.map(rs => {
							this.uploadAvatar(rs);
						});
					},
					fail: error => {
						console.error(error);
					},
				});
			},
			//从相册中选择
			chooseImage() {
				uni.chooseImage({
					sourceType: ['album'],
					count: 9 - this.uploadCount,
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						tempFilePaths.map(rs => {
							this.uploadAvatar(rs);
						});
						// 调用上传图片的方法
					},
					fail: error => {
						console.error(error);
					},
				});
			},
			// 上传头像
			uploadAvatar(filePath) {
				// 在这里实现上传头像的逻辑，将filePath作为参数传入
				this.fileList.push(filePath);
				this.uploadCount = this.fileList.length;
				// 手动触发组件的重新渲染
				this.$forceUpdate();
				this.$emit('update', this.fileList, this.value);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.imageUpload {
		.images-box {
			width: 100%;
			height: 400rpx;
			background-color: pink;

			image {
				height: 100%;
				width: 100%;
			}
		}
	}
</style>