如何优雅使用uniapp简单实现发布朋友圈功能(流程及代码）

效果图如下图，样式可根据需求自行调整

template部分

<view class="flex flex-wrap">
			<view v-for="(item,index) in imageList" :key='index'
				class="flex align-center justify-center pt-2 position-relative">
				<image :src="item" class="bg-light rounded" style="" @click="preview(item)"></image>
				<view class="flex align-center justify-center bg-danger rounded-circle " style=""
					@click="deleteImage(item)">
					<text class="iconfont text-white font-small">X</text>
				</view>
			</view>

			<view v-if="imageList.length < 9" style="" class="flex align-center justify-center" @click="chooseImage">
				<view class="flex align-center justify-center bg-light rounded" style="width: 210rpx;height: 210rpx;">
					<!-- <text class="text-light-muted" style="font-size: 100rpx;">+</text> -->
					<image src="../../static/images/ings/circle/add1.png" mode=""></image>
				</view>
			</view>
		</view>

 script部分

 选择图片（通过upload得到每张图片地址）

chooseImage() {
				var that = this
				uni.chooseImage({
					count: 9 - this.imageList.length,
					sizeType: ['compressed'],
					success: (res) => {
						// 上传
						res.tempFilePaths.forEach(path => {
							that.$api.upload({
								url: "common/upload",
								// filePath: res.tempFilePaths[0],
								filePath: path,
								success: (res) => {
									this.imageList.push(res.fullurl);
									this.imageLi.push(res.url)
								}
							});
							// $H.upload('/upload',{
							// 	filePath:path
							// },(progress)=>{
							// 	console.log('上传进度',progress);
							// }).then(url=>{
							// 	this.imageList.push(url);
							// 	this.$emit('update',this.imageList);
							// })
						})
						// this.imageList = [...this.imageList,...res.tempFilePaths];
						// this.$emit('update',this.imageList);
					}
				})
			},

预览图片

// 预览图片
			preview(item) {
				uni.previewImage({
					current: item,
					urls: this.imageList
				})
			},

 删除图片

// 删除图片
			deleteImage(item) {
				uni.showModal({
					content: '是否要删除该图片？',
					success: (res) => {
						if (res.confirm) {
							// 执行删除
							let index = this.imageList.findIndex(url => url === item);
							if (index !== -1) {
								this.imageList.splice(index, 1);
								this.imageLi.splice(index, 1);
								this.$emit('update', this.imageList);
							}
						}
					}
				})
			}