martial-arts/pagesB/upload-video/upload-video.vue

<template>
	<view>
		<status-container titlet="上传练习视频" returnc="#FFFFFF">
			<view slot="content">
				<view class="pad-zy20">
					<view class="radius8 bacf pad-sx40 pad-zy40 boxshow2 col26 fon24">
						<view class="">视频标题</view>
						<input v-model="title" class="width100 radius4 mar-s20 pad-zy20" type="text" style="border: 2rpx solid #ececec;background-color: #f5f5f5;height: 70rpx;box-sizing: border-box;">
						<view class="mar-s40">视频上传：温馨提示：请上传像素720P，规格100M以内的视频。</view>
						<input @tap="uploadVideo" class="width100 radius4 mar-s20 pad-zy20 tcenter" type="text" placeholder="浏览..." disabled
						style="border: 2rpx solid #ececec;background-color: #f5f5f5;height: 70rpx;box-sizing: border-box;">
						<view class="pad-s20" v-if="videoInfo.full_src">
							<video :src="videoInfo.full_src" :controls="true" object-fit="contain" :show-center-play-btn="true" style="height: 388rpx;" class="width100"></video>
						</view>
						<input @tap="submitEv" class="width100 radius4 mar-s60 tcenter" type="text" placeholder="立即保存" placeholder-style="color:#FFFFFF;" disabled
						style="border: 2rpx solid #e42417;background-color: #e42417;height: 70rpx;box-sizing: border-box;">
					</view>
				</view>
			</view>
		</status-container>
	</view>
</template>

<script>
	import {uploadFile} from '@/jsFile/public-api.js';
	export default {
		data() {
			return {
				title:'',
				videoInfo:{
					full_src:'',
					src:''
				},
				flag:true,
				qiniuToken:'',
				qiniuFilename:'',
				hostapi:'',
			}
		},
		onLoad() {
			this.hostapi = getApp().globalData.hostapiQi;
			this.getQiniu();
		},
		methods: {
			getQiniu() {
				this.$requst.post('/api/common/qiniuToken').then(res=>{
					if(res.code==0){
						console.log(res,'qiniu token')
						this.qiniuToken = res.data.token;
						this.qiniuFilename = res.data.filename + '.mp4';
					}
					
				}).catch(err=>{
					
				})
			},
			
			// 上传视频
			uploadVideo(){
				uni.chooseMedia({
					sourceType:['album','camera'],
					maxDuration: 60,
					success: (res) => {
						uni.showToast({
							title:'正在上传,请勿关闭页面和退出',
							icon:'none',
							duration:100000
						})
						let file = res.tempFiles[0].tempFilePath;
						let key = this.qiniuFilename;
						let token = this.qiniuToken;
						
						uni.uploadFile({
							url: "https://up-z1.qiniup.com",//华北地区上传
							filePath: file,
							name: 'file',
							method: "POST",
							formData: {
								'key': key,//key值
								'token': token //七牛云token值
							},
							success: uploadFileRes => {
							  //uploadFileRes 返回了data是一个json字符串 
							  //拿到里面的key拼接上域名，再反出去就ok了
									let strToObj=JSON.parse(uploadFileRes.data),
									backUrl = this.hostapi+ '/' + strToObj.key,
									uploadUrl = '/' + strToObj.key;
									this.videoInfo.full_src = backUrl;
									this.videoInfo.src = uploadUrl;
									console.log(this.videoInfo)
									setTimeout(()=>{
										uni.hideToast();
									},500)
							},
							fail: fail => {
								uni.showToast({ title: "网络错误", icon: "none" });
							}
						})
						
						// uploadFile({path:res.tempFiles[0].tempFilePath}).then(res=>{
						// 	if(res.code==0){
						// 		this.videoInfo = res.data;
						// 		this.$toolAll.tools.showToast('上传视频成功(*^▽^*)');
						// 	}
						// 	setTimeout(()=>{
						// 		uni.hideToast();
						// 	},1500)
						// })
					}
				})
			},
			// 上传执行事件
			submitEv(){
				if(!this.title){
					this.$toolAll.tools.showToast('请输入视频标题');
				} else if(!this.videoInfo.full_src){
					this.$toolAll.tools.showToast('请上传视频');
				} else {
					if(this.flag){
						this.flag = false;
						let params = {
							title:this.title,
							video:this.videoInfo.src
						}
						uni.showToast({
							title:'正在上传练习视频',
							icon:'none',
							duration:100000
						})
						this.$requst.post('/api/user/practice-video',params).then(res=>{
							if(res.code==0){
								this.title = '';
								this.videoInfo.full_src = '';
								this.$toolAll.tools.showToast('保存成功');
								setTimeout(()=>{
									uni.navigateBack({delta:1})
								},1000)
							}
							setTimeout(()=>{
								uni.hideToast();
							},500)
						}).catch(err=>{
							this.flag = true;
						})
					}
				}
			}
		}
	}
</script>

<style>

</style>