vue 接入 vod-js-sdk-v6.js 完成视频上传

东西有点多,耐心看完。按照操作一步一步来,绝对能成功

首先:npm 引入

npm install vod-js-sdk-v6


mian.js  全局引入 
//腾讯云点播
import TcVod from 'vod-js-sdk-v6'
Vue.prototype.$TcVod = TcVod

其次: vue 文件的引用
<input type="file" accept=".mp4" @change="uploadVideoChanged($event)" />   

注意: 这里 设置 type=“file” 是关键,一定要设置  type="file" , 然后就是 一定要用 @change 事件 ,event 一定得传,用来获取整个 input 的

下面的可以直接复制粘贴进去了,但是获取签名的方法一定得改成自己的,别瞎抄。

data 参数部分

newsVideoUrl: '',  //视频文件地址
vFile: {}, //视频文件File对象
vIsFileExist:false, //File对象是否存在
vUploader:{}, //腾讯云上传的初始化对象
vProgress: 0, //视频上传进度
vStatus:'active', //视频上传状态,string类型: active正在上传,success成功,exception失败
vIsUploading:false, //是否正在上传
signature : '',// 获取签名

这里的 create 用来获取签名

create 部分: 用来获取签名

this.getUploadSignature()

获取签名 的接口请替换成 后端提供的获取签名接口

//获取签名
getUploadSignature(){
getUploadSignature().then(res=>{
this.signature = res.data
})
}, //调用本地文件列表
//选择视频文件
uploadVideoChanged(e){
if(e.currentTarget.files[0].type=='video/mp4'){
this.vFile = e.currentTarget.files[0] //获取上传文件中的File对象信息
this.vIsFileExist=true
}else{
this.$message.warning('仅支持mp4格式的视频上传')
}
}, //腾讯云点播上传视频
uploadVideoFile(){
if(this.vIsFileExist==false){
this.$message.warning('请先选择视频文件')
return
}else if(this.vIsUploading){
this.$message.warning('正在上传中,请勿重复上传')
return
}
// else if(this.vStatus=='success'){
// this.$message.warning('当前视频已上传完毕,请勿重复上传')
// return
// }
//获取腾讯云点播视频上传签名,这里注意:必须用函数表达式这种方式定义getSignature函数才行(如下),使用Vue的传统方式:先声明getSignature(){}函数再this.getSignature()调用这种方式不会生效也不报错。这是个坑
let getVideoSignature=()=> {
return this.signature
}
let tcVod = new this.$TcVod({ //腾讯云-添加签名
getSignature: getVideoSignature
})
this.vUploader = tcVod.upload({ //腾讯云-初始化上传功能
mediaFile: this.vFile,
}) this.vStatus='active' //正在上传状态
this.vIsUploading=true //是否正在上传 this.vUploader.on('media_progress',(info)=>{ //获取上传进度信息
this.vProgress = info.percent
}) this.vUploader.done().then(res=>{ //上传完成回调
this.$message.success('视频文件上传成功')
      //this.vStatus='success'
this.vIsUploading=false
this.newsVideoUrl=res.video.url
}).catch(()=>{
this.$message.warning('视频文件上传失败')
this.vStatus='exception'
this.vIsUploading=false
})
},

然后就能获取 文件 id了,最后根据自己的需求去使用这个文件 id

能发现的值得我给你提供一个参考地址,

提别提供: https://www.cnblogs.com/huihuihero/p/13162323.html

 
 


上一篇:node实现http上传文件进度条 -我们到底能走多远系列(37)


下一篇:Springboot 文件上传(带进度条)