Vue 腾讯云视频上传
Vue 腾讯云视频上传
接上一篇,这里的后台项目,视频上传到腾讯云以后,生成的地址用来给 IOS、安卓调用显示。
引入 SDK , 安装 vod-js-sdk-v6
npm i vod-js-sdk-v6 -S
会多处调用,在 main.js 将 TcVod 设置成全局对象
import TcVod from 'vod-js-sdk-v6'
Vue.prototype.$TcVod = TcVod
用Element-ui 的上传组件
<el-form-item label="活动介绍视频" prop="videoIntro" :rules="[{ required: true, message: '请上传活动介绍视频'}]">
<el-col :span="9">
<el-upload class="upload-unit" :http-request="videoSuccess" action="" :limit="1" list-type="text" :file-list="topic.videoIntro" accept="video/*">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-col>
</el-form-item>
引入 封装的 mixins
import { upload } from '@/components/mixins'
export default {
mixins:[ upload ],
methods:{
videoSuccess(file){
this.videoUpload(file,"topic","videoIntro")
}
}
getVideoSecret 取临时密钥
videoUpload 用传来的 file、临时密钥 实现视频上传,同时设置对应的值、触发校验
module.exports = {
upload:{
getVideoSecret(){
return this.$fetch.videoTempSecret().then( response => {
return response.data.data
})
},
videoUpload(file,main,key,index,subkey){
let _this = this
const tcVod = new this.$TcVod({
getSignature:this.getVideoSecret
})
const uploader = tcVod.upload({
mediaFile: file.file
})
uploader.done().then((doneResult)=>{
if(subkey){
_this[main][key][index][subkey] = [{name:doneResult.video.url.slice(doneResult.video.url.lastIndexOf("/")+1), url:doneResult.video.url}]
_this.$refs[key + index][0].validateField(subkey)
}
else{
_this[main][key] = [{name:doneResult.video.url.slice(doneResult.video.url.lastIndexOf("/")+1), url:doneResult.video.url}]
_this.$refs[main].validateField(key)
}
}).catch(function (err) {
_this.$message.error("上传失败")
})
}
}
}
}
有问题,可Q我:770703721
————————————————
版权声明:本文为CSDN博主「唐鹏程」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/sinat_36539161/article/details/108367266