uni-app 157发布朋友圈-批量上传图片

如下是我测试的截图

/components/free-ui/free-upload-image.vue

<template>
	<view class="flex flex-wrap">
		<view style="width: 230rpx;" 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="width: 210rpx;height: 210rpx;" @click="preview(item)"></image>
			<view class="flex align-center justify-center bg-danger rounded-circle " style="width: 60rpx;height: 60rpx;position: absolute;right: 0;top: 10rpx;background-color: rgba(0,0,0,0.5);" @click="deleteImage(item)">
				<text class="iconfont text-white font-small">X</text>
			</view>
		</view>
		
		<view v-if="imageList.length < 9" style="width: 230rpx;" 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>
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	export default{
		props:{
			data:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		data(){
			return {
				imageList:[]
			}
		},
		mounted() {
			this.imageList = this.data;
		},
		methods:{
			// 选择图片
			chooseImage(){
				uni.chooseImage({
					count:9 - this.imageList.length,
					sizeType:['compressed'],
					success:(res)=>{
						// 上传
						res.tempFilePaths.forEach(path=>{
							$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.$emit('update',this.imageList);
							}
						}
					}
				})
			   
			}
		}
	}
</script>

<style>
</style>

/pages/find/moments/moments.vue

<template>
	<view>
		<free-transparent-bar :scrollTop="scrollTop" @clickRight="clickRight"></free-transparent-bar>
		<view class="position-relative" style="height: 620rpx;">
			<image src="https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/shengchengqi/datapic/1.jpg" mode="aspectFill" style="height: 590rpx;" class="bg-secondary w-100"></image>
			<image :src="user.avatar || '/static/images/demo/demo6.jpg'" style="width: 120rpx;height:120rpx;right: 30rpx;" mode="" class="bg-secondary rounded position-absolute bottom-0"></image>
			<text class="text-white font-md position-absolute" style="bottom: 45rpx;right: 160rpx">{{user.nickname || user.username}}</text>
		</view>
		
		<!-- 朋友圈列表样式 -->
		<free-moment-list v-for="(item,index) in list" :key='index' :item="item" :index="index" @action="doAction" @reply="replyEvent"></free-moment-list>
		
		<!-- 评论框 -->
		<free-popup ref="action" bottom transformOrigin="center bottom">
			<view style="height: 105rpx;" class="bg-light border-top flex align-center">
				<textarea fixed class="bg-white rounded p-2 font-md" style="height: 45rpx;width: 420rpx;" value="" placeholder=""  v-model="content" :focus="true"/>
				<free-icon-button @click="changeFaceModeal"><text class="iconfont font-lg">&#xe605;</text></free-icon-button>
				<free-main-button name="发送" :disabled="content.length===0" @click="send"></free-main-button>
			</view>
			
			<!-- 表情包 -->
			<scroll-view v-if="faceModal" scroll-y="true" style="height: 350rpx;" class="bg-light">
				<view class="flex flex-wrap">
					<view class="flex align-center justify-center" hover-class="bg-white" style="width:107rpx;height:107rpx;" v-for="(item,index) in faceList" :key="index" @click="addFace(item)">
						<text>{{item}}</text>
					</view>
				</view>
			</scroll-view>
		</free-popup>
		
		<!-- 上拉加载 -->
		<view class="flex align-center justify-center py-5 bg-light" v-if="list.length >= 10">
			<text class="text-muted font">{{loadmore}}</text>
		</view>
	</view>
</template>

<script>
	import freeTransparentBar from '@/components/free-ui/free-transparent-bar.vue';
	import freeMomentList from '@/components/free-ui/free-moment-list.vue';
	import freePopup from '@/components/free-ui/free-popup.vue';
	import freeIconButton from '@/components/free-ui/free-icon-button.vue';
	import freeMainButton from '@/components/free-ui/free-main-button.vue';
	import $H from '@/common/free-lib/request.js';
	import { mapState } from 'vuex';
	export default {
		components:{
			freeTransparentBar,
			freeMomentList,
			freePopup,
			freeIconButton,
			freeMainButton
		},
		data() {
			return {
				content:'',
				scrollTop:0,
				faceModal:false,
				faceList:["😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","😇","😐","😑","😶","😏","😣","😥","😮","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","😲","😷","😖","😞","😟","😤","😢","😭","😦","😧","😨","😬","😰","😱","😳","😵","😡","😠"],
				commentIndex:-1,
				page:1,
				loadmore:'上拉加载更多',
				key:'moment_timeline',
				list:[],
				reply_user:false
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if(this.loadmore !== '上拉加载更多'){
				return;
			}
			this.page += 1;
			this.loadmore = '加载中...';
			this.getData().catch(err=>{
				this.page -= 1;
				uni.showToast({
					title:'加载失败',
					icon:'none'
				});
				this.loadmore = '上拉加载更多';
			})
		},
		onLoad(e) {
			if(e.key){
				this.key  = e.key;
			}
			this.page = 1;
			this.getData();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getData().then(res=>{
				uni.showToast({
					title:'刷新成功',
					icon:'none'
				});
				uni.stopPullDownRefresh();
			}).catch(err=>{
				uni.showToast({
					title:'刷新失败',
					icon:'none'
				});
				uni.stopPullDownRefresh();
			});
		},
		computed:{
			...mapState({
				user:state=>state.user.user
			})
		},
		methods: {
			// 点击操作菜单
			doAction(e){
				uni.showActionSheet({
					itemList: ['点赞','评论'],
					success: res => {
						if(res.tapIndex === 0){
							// 点赞
							this.doSupport(e)
						}else{
							this.content='';
							this.faceModal=false;
							this.commentIndex = e.index;
							this.reply_user = false;
							this.$refs.action.show();
							// this.doComment(e)
						}
					}
				});
			},
			// 获取数据
			getData(){
				return new Promise((result,reject)=>{
					let page = this.page;
					$H.get('/'+this.key+'/'+page).then(res=>{
						this.list = page === 1 ? res : [...this.list,...res];
						this.loadmore = this.list.length === (page * 10) ? '上拉加载更多' : '没有更多了'
						result(res);
					}).catch(err=>{
						reject(err);
					})
				})
			},
			// 点赞
			doSupport(e){
				$H.post('/moment/like',{id:e.item.moment_id}).then(res=>{
			   let i = e.item.likes.findIndex(item=>item.id === this.user.id);
			   if(i !== -1){
				   // 取消点赞
				   e.item.likes.splice(i,1);
			   }else{
				   // 点赞
				   e.item.likes.push({
					   id:this.user.id,
					   name:this.user.nickname || this.user.username
				   })
			   }
			   uni.showToast({
			   	title:i !== -1 ? '取消点赞成功' : '点赞成功',
				icon:'none'
			   });
			   
			  })
			},
			// 添加表情
			addFace(item){
				this.content += item;
			},
			// 开启关闭表情包面板
			changeFaceModeal(){
				uni.hideKeyboard();
				setTimeout(()=>{
					this.faceModal = !this.faceModal;
				},100);
			},
			// 发送
			send(){
				console.log(this.reply_user);
				let item = this.list[this.commentIndex];
				$H.post('/moment/comment',{
					id:item.moment_id,
					content:this.content,
					reply_id:this.reply_user ? this.reply_user.id : 0
				}).then(res=>{
					item.comments.push({
						content:this.content,
						user:{
							id:this.user.id,
							name:this.user.nickname || this.user.username
						},
						replay:this.reply_user ? this.reply : null
					})
					uni.showToast({
						title:'评论成功',
						icon:'none'
					})
				})
				this.$refs.action.hide();
			},
			replyEvent(e){
				this.content = '';
				this.faceModal = false,
				this.commentIndex = e.index,
				this.reply_user = e.reply;
				this.$refs.action.show();
			},
			// 选择发表朋友圈类型
			clickRight(){
				let list = [{
					name:'图文',
					key:'image'
				},
				{
					name:'视频',
					key:'video'
				},
				{
					name:'文字',
					key:'content'
				}];
				uni.showActionSheet({
					itemList:list.map(v=>v.name),
					success:res=>{
						uni.navigateTo({
							url: '../add-moment/add-moment?type='+list[res.tapIndex].key,
						});
					}
				})
			}
		},
	}
</script>

<style>

</style>

/pages/find/add-moment/add-moment.vue

<template>
	<view class="px-3">
		<!-- 导航栏 -->
		<free-nav-bar showBack :showRight="true">
			<free-main-button name="发表" slot="right" @click="submit"></free-main-button>
		</free-nav-bar>
		<!-- 文字 -->
		<textarea value="" placeholder="这一刻的想法" v-model="content" class="font-md mb-3" />
		<!-- 图文 -->
		<free-upload-image :data="imageList" v-if="type==='image'" @update='uploadImage'></free-upload-image>
		<!-- 视频 -->
		<block v-if="type==='video'">
		<view v-if="!viedo" class="flex align-center justify-center  bg-light rounded" style="height: 350rpx;" hover-class="bg-hover-light" @click="uploadVideo">
			<text class="text-muted" style="font-size:100rpx;">+</text>
		</view>
		<viedo v-if="viedo" :src="viedo" controls></viedo>
		<view v-if="viedo" class="my-3 flex align-center justify-center bg-light" hover-class="bg-hover-light" style="height:100rpx;" @click="uploadVideo">
			<text class="font-md text-muted">点击切换视频</text>
		</view>
		</block>
		
		<free-list-item title="所在位置" showRight :showLeftIcon="false">
			<text slot="right" class="font-md">位置</text>
		</free-list-item>
		<free-list-item title="提醒谁看" showRight :showLeftIcon="false">
			<text slot="right" class="font-md">位置</text>
		</free-list-item>
		<free-list-item title="谁可以看" showRight :showLeftIcon="false">
			<text slot="right" class="font-md">位置</text>
		</free-list-item>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeMainButton from '@/components/free-ui/free-main-button.vue';
	import freeListItem from "@/components/free-ui/free-list-item.vue";
	import freeUploadImage from '@/components/free-ui/free-upload-image.vue';
	import $H from '@/common/free-lib/request.js'
	export default {
		components:{
			freeNavBar,
			freeMainButton,
			freeListItem,
			freeUploadImage
		},
		data() {
			return {
				content:'',
				type:'image',
				imageList:[],
				viedo:''
			}
		},
		onLoad(e) {
			this.type=e.type;
		},
		methods: {
			// 发布
			submit(){
				$H.post('/moment/create',{
					
					content:this.content,
					image:this.imageList.join(','),
					video:this.viedo,
					type:this.type,
					location:'',
					remind:'',
					see:''
				}).then(res=>{
					
				})
			},
			// 上传图片
			uploadImage(list){
				this.imageList = list;
			},
			// 上传视频
			uploadVideo(){
				uni.chooseVideo({
					maxDuration:10,
					success:(e)=>{
						this.viedo = e.tempFilePath;
					}
				})
			}
		}
	}
</script>

<style>

</style>

感谢大家观看，我们下次见