155 lines
4.4 KiB
Vue
155 lines
4.4 KiB
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>
|