sugarpark-mini-program/pagesSub/faceVideo/faceVideo.vue

<template>
	<view class="container">
		<view id="topnav" class="topnav flex-between"  :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`}">
			<view class="nav-item flex-center" @click="back">
				<image :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></image>
			</view>
			<view class="nav-text font32 fw600">
				{{topbarTitle}}
			</view>
			<view class="nav-item"></view>
		</view>
		<view class="upload-box flex-center" @click="chooseMedia">
			<image :src="`${assetsUrl}mine-camera.png`" mode="widthFix" class="upload-img"></image>
			<view class="upload-text font28 fw400">选择视频</view>
		</view>
		<view class="tip font22 fw400">
			点击添加你的封面视频
		</view>
	</view>
</template>

<script>
	import {getPolicy,computeSignature,getKey} from '@/util/oss.js';
	import {encode} from '@/util/base64.js'
	export default {
		data() {
			return {
				topbarIcon:'back',
				topbarTitle:'编辑封面视频',
				assetsUrl:this.$util.assetsUrl,
				topNavHeight:0,
				options:{
					completeUser:null,
					pageHomeUserId:null,
					personalPageHomeVideoOperateEnum:'UPLOAD',
					personalPageHomeVideoUrl: "",
					sizeMB: 0,
					vdoTime: 0,
					width: 0,
					height:0
				}
			};
		},
		mounted() {
			this.computedScollviewHeight();
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.statusBarHeight;
			},
			topbarOffsetHeight() {
				return this.$store.state.topbarOffsetHeight;
			},
			userInfo(){
				return this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))
			}
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			/**
			 * 计算scroll高度
			 */
			computedScollviewHeight() {
				let query = uni.createSelectorQuery().in(this);
				let heightLeaf =0;
				query.select('#topnav').boundingClientRect(data => {
					this.topNavHeight=data.height;
					heightLeaf += data.height;
				}).exec(() => {
					let sysInfo = uni.getSystemInfoSync();
					this.scrollHeight = sysInfo.windowHeight - heightLeaf;
				});
			
			},
			chooseMedia(){
				const that=this;
				uni.chooseMedia({
					count: 1,
				    mediaType: ['video'],
				    sourceType: ['album', 'camera'],
				    maxDuration: 30,
				    camera: 'back',
				    success:(res)=>{
						console.log(res.tempFiles[0]);
						uni.showLoading({
							title:'正在上传',
							mask:true
						})
						const policyText=getPolicy();
						const policy=encode(JSON.stringify(policyText));
						const key=getKey(0,res.tempFiles[0].tempFilePath.split('.')[1]);
						that.$api.public.aliossToken({}).then(resuslt=>{
							let formData={
								key:key,
								policy:policy,
								OSSAccessKeyId:resuslt.data.accessKeyId,
								signature:computeSignature(resuslt.data.accessKeySecret,policy),
								'x-oss-security-token':resuslt.data.securityToken,
								success_action_status:'200'
							}
							uni.uploadFile({
								url: 'https://zhenyanapp-gen.oss-cn-qingdao.aliyuncs.com',
								filePath:res.tempFiles[0].tempFilePath,
								name: 'file',
								header:{
									"Content-Type": "multipart/form-data"
								},
								formData: formData,
								success: (data) => {
								    if (data.statusCode === 200) {
									  let videoUrl=`${that.$store.state.videoCdn}/${key}`;
									  let user=JSON.parse(uni.getStorageSync('user'));
									  that.options.height=res.tempFiles[0].height;
									  that.options.width=res.tempFiles[0].width;
									  that.options.completeUser=user;
									  that.options.pageHomeUserId=user.id;
									  that.options.sizeMB=res.tempFiles[0].size/1024/1024;
									  that.options.personalPageHomeVideoUrl=videoUrl;
									  that.options.vdoTime=res.tempFiles[0].duration;
									  that.$api.public.videoProcess(that.options).then(res=>{
										  uni.hideLoading()
										  if(res.status==='Succ'){
											  
											  uni.showToast({
											  	icon:'success',
												title:'上传成功'
											  });
											  setTimeout(()=>{
												  uni.navigateBack({
												  	delta:1
												  })
											  },1500)
										  }
										  else{
											 uni.showToast({
											 	icon:'none',
											 	title:'上传失败，请重试！'
											 }); 
										  }
									  })
								    }
								},
								fail: err => {
								    console.log(err);
								  }
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	height: 100vh;
	background-color: $bgcolor1;
	overflow: hidden;
	position: relative;
	.topnav {
		padding: 0 10rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 100;
		background-color: $bgcolor1;
		.nav-item{
			width: 40rpx;
			height: 40rpx;
			margin-left: 16rpx;
			
			.nav-img{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.nav-text{
			flex: 1;
			color: $fontcolor5;
			height: 40rpx;
			text-align: center;
		}
	}
	.upload-box{
		flex-direction: column;
		width: 360rpx;
		height: 360rpx;
		background: #1F1A30;
		border-radius: 16rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		.upload-img{
			width: 80rpx;
			height: 80rpx;
		}
		.upload-text{
			color: #ffffff;
			margin-top: 8rpx;
		}
	}
	.tip{
		color: #7D7DA4;
		margin-top: 40rpxs;
	}
}
</style>