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

下图是我测试截图

/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>

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