book-hi/pages-sell/components/image-upload/index.vue

<template>
	<view class="image-upload-container">
		<view class="upload-list">
			<view class="upload-item" v-for="(item, index) in value" :key="index">
				<u-image :src="item" width="160rpx" height="160rpx" border-radius="8"
					@click="onPreview(index)"></u-image>
				<view class="delete-btn" @click.stop="onDelete(index)">
					<u-icon name="close" color="#ffffff" size="20"></u-icon>
				</view>
			</view>
			<view class="upload-btn" v-if="value.length < maxCount" @click="onChoose" :style="{ backgroundColor: bgColor }"> 
				<u-icon name="camera" size="48" color="#909399"></u-icon>
				<text class="btn-text">图片/视频</text>
			</view>
		</view>
		<view class="upload-tip">
			<u-icon name="info-circle" size="24" color="#909399"></u-icon>
			<text class="tip-text">上传“有效截图”可以让问题优先被发现哦！</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ImageUpload',
		props: {
			value: {
				type: Array,
				default: () => []
			},
			maxCount: {
				type: Number,
				default: 9
			},
			bgColor: {
				type: String,
				default: '#fff'
			}
		},
		methods: {
			onChoose() {
				uni.chooseImage({
					count: this.maxCount - this.value.length,
					success: async (res) => {
						uni.showLoading({
							title: '上传中...'
						});
						const tempFilePaths = res.tempFilePaths;
						const uploadPromises = tempFilePaths.map(path => {
							return this.uploadFeedbackFileAjax(path);
						});

						try {
							const results = await Promise.all(uploadPromises);
							const newList = [...this.value, ...results];
							this.$emit('input', newList);
							uni.hideLoading();
						} catch (e) {
							uni.hideLoading();
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
							console.error(e);
						}
					}
				});
			},
			uploadFeedbackFileAjax: (filePath) => {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: uni.$u.http.config.baseUrl + '/token/shop/feedback/fileUpload',
						filePath: filePath,
						name: 'file',
						header: {
							'Authorization': uni.getStorageSync('token') || '',
						},
						success: (res) => {
							const data = JSON.parse(res.data);
							if (data.code == 200) {
								resolve(data.data);
							} else {
								reject(data.msg);
							}
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},

			onDelete(index) {
				const newList = [...this.value];
				newList.splice(index, 1);
				this.$emit('input', newList);
			},
			onPreview(index) {
				uni.previewImage({
					urls: this.value,
					current: index
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.image-upload-container {
		width: 100%;
	}

	.upload-list {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10rpx;
	}

	.upload-item,
	.upload-btn {
		width: 160rpx;
		height: 160rpx;
		margin: 10rpx;
		border-radius: 8rpx;
		position: relative;
	}

	.upload-btn {
		background-color: #f4f5f6;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.btn-text {
			font-size: 24rpx;
			color: #909399;
			margin-top: 10rpx;
		}
	}

	.delete-btn {
		position: absolute;
		top: 0;
		right: 0;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-bottom-left-radius: 8rpx;
		border-top-right-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
	}

	.upload-tip {
		margin-top: 20rpx;
		display: flex;
		align-items: center;

		.tip-text {
			font-size: 24rpx;
			color: #909399;
			margin-left: 10rpx;
		}
	}
</style>