uni-app 158发布朋友圈-上传短视频

Posted 2022-01-08 2019ab

下图是我测试截图

/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="!video" 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>
		<video v-if="type === 'video' && video && video.src" :src="video.src" :poster="video.poster" controls></video>
		<view v-if="type === 'video' && video && video.src" 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:[],
				video:false
			
		,
		onLoad(e) 
			this.type=e.type;
		,
		methods: 
			// 发布
			submit()
				$H.post('/moment/create',
					
					content:this.content,
					image:this.imageList.join(','),
					video:this.video ? JSON.stringify(this.video) : '',
					type:this.type,
					location:'',
					remind:'',
					see:''
				).then(res=>
					uni.showToast(
						title:'发布成功',
						icon:'none'
					);
					uni.navigateBack(
						delta:1
					)
				)
			,
			// 上传图片
			uploadImage(list)
				this.imageList = list;
			,
			// 上传视频
			uploadVideo()
				uni.chooseVideo(
					maxDuration:10,
					success:(e)=>
						// this.video = e.tempFilePath;
						$H.upload('/upload',
							filePath:e.tempFilePath
						,(progress)=>
							console.log('上传进度',progress);
						).then(url=>
							this.video = 
								src:url,
								poster:url+'?x-oss-process=video/snapshot,t_10,m_fast,w_300,f_png'
							
						)
					
				)
			
		
	
</script>

<style>

</style>

/components/free-ui/free-moment-list.vue

<template>
	<view class="p-3 flex align-start border-bottom border-light-secondary">
		<free-avater :src="item.avatar" size="80"></free-avater>
		<view class="pl-2 flex-1 flex flex-column">
			<!-- 昵称 -->
			<text class="font-md text-hover-primary mb-1">item.user_name</text>
			<!-- 内容 -->
			<text v-if="item.content" class="font-md text-dark mb-1">item.content</text>
			<!-- 图片 -->
			<view v-if="item.image.length" class="py-2 flex flex-wrap">
				<block v-for="(image,imageIndex) in item.image"
				:key="imageIndex">
					<!-- 单图 -->
					<free-image v-if="item.image.length === 1" :src="image" imageClass="rounded bg-secondary" @click="preview(image)"></free-image>
					<!-- 多图 -->
					<image v-else :src="image" mode="aspectFill" style="height: 180rpx;width: 180rpx;" class="bg-secondary mr-2 mb-2 rounded" @click="preview(image)"></image>
				</block>
			</view>
			<!-- 视频 -->
			<view v-if="item.video" class="py-2">
				<video :src="item.video.src" :poster="item.video.poster" controls style="height: 300rpx;width: 500rpx;" loop></video>
			</view>
			<!-- 时间|操作 -->
			<view class="flex align-center justify-between">
				<text class="font-sm text-light-muted">item.created_at|formatTime</text>
				<view class="rounded p-1 bg-light" @click="$emit('action',item,index)">
					<text class="text-hover-primary iconfont font">&#xe62a;</text>
				</view>
			</view>
			<!-- 点赞列表|评论列表 -->
			<view class="bg-light mt-2" v-if="item.likes.length || item.comments.length">
				<!-- 点赞 -->
				<view v-if="item.likes.length" class="border-bottom flex align-start p-2">
					<text class="flex-shrink iconfont font text-hover-primary">&#xe637;</text>
					<view class="flex flex-1 flex-wrap ml-1">
						<text v-for="(s,si) in item.likes" :key="si" class="font text-hover-primary ml-1">s.name</text>
					</view>
				</view>
				<!-- 评论 -->
				<view v-if="item.comments.length" class="flex align-start p-2">
					<text class="flex-shrink iconfont font-md text-hover-primary">&#xe64e;</text>
					<view class="flex flex-column flex-1 ml-2">
						<view class="flex" 
						v-for="(c,ci) in item.comments"
						:key="ci" :index='index'>
							<text v-if="!c.reply" class="text-hover-primary font">c.user.name：</text>
							<view v-else class="flex align-center">
								<text class="text-hover-primary font">c.user.name </text>
								<text class="text-muted font-sm">回复</text>
								<text class="text-hover-primary font">c.reply.name：</text>
							</view>
							<text class="font text-dark flex-1"
							@click="$emit('reply',
								item,
								index,
								reply:c.user
							)">c.content</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import freeAvater from '@/components/free-ui/free-avater.vue';
	import freeImage from '@/components/free-ui/free-image.vue';
	import $T from '@/common/free-lib/time.js';
	export default 
		components: 
			freeAvater,
			freeImage
		,
		props: 
			item: Object,
			index:Number
		,
		filters: 
			formatTime(value) 
				return $T.gettime(value);
			
		,
		methods: 
			// 查看大图
			preview(src) 
				uni.previewImage(
					current:src,
					urls:this.item.image 
				)
			
		,
	
</script>

<style>
</style>

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