Vue实现腾讯云点播视频上传功能的实现代码

2023-07-18 17:53:17 190

基于Vue+ElementUI+vod-js-sdk-v6，完成腾讯云点播视频上传功能

最近做的一个项目，需要用到腾讯云点播的视频上传！！写一个尽可能详细的博客供各位参考，欢迎指正；ok，下面进入正题。
首先是需要用到的依赖：ElementUI、vod-js-sdk-v6、axios

npmivod-js-sdk-v6
npmiaxios

importvuefrom'vue'
import{Upload,Progress}from'element-ui'
vue.use(Upload)
vue.use(Progress)

我采用了ElementUI的手动上传组件，比之自动上传用户体验会更好一点

接下来是一些变量的定义以及sdk的引入

importTcVodfrom'vod-js-sdk-v6'
exportdefault{
data(){
return{
//文件列表
fileList:[],
//上传成功后的地址
videoURL:'',
//进度条百分比
progress:0,
//base64图片地址注：这个是项目需要设置一个默认的视频封面，不需要的忽略就行
imgBase:'',
//上传视频获取成功后拿到的fileID【备用】
fileId:''
}
}
}

最后是具体逻辑

methods:{
//获取签名这里的签名请求是由后端提供的，只需要拿到后端给的签名请求即可
getVodSignature(){
consturl='/bpi/artworkMaking/findSingature'
returnthis.$axios.post(url).then(function(response){
returnresponse.data.data
})
},
//文件列表改变时将文件列表保存到本地
handleChange(file,fileList){
this.fileList=fileList
},
//点击上传时
submitUpload(){
if(this.fileList.length<1)returnthis.$MessageBox('请先选取视频，再进行上传','提示')
this.uploadVideo()
},
//自定义上传
uploadVideo(e){
//当
console.log(this.fileList[0].raw)
if(this.fileList.length<1){
window.alert('您还没有选取文件')
}else{
	//必须以函数的形式返回sdk参数限制
constgetSignature=async()=>{
constdata=awaitthis.getVodSignature()
returndata
}
consttcVod=newTcVod({
getSignature:getSignature//获取上传签名的函数
})
//获取通过elementui上传到本地的文件因为参数类型必须为file不能直接以对象的形式传输
constmediaFile=this.fileList[0].raw
constuploader=tcVod.upload({
mediaFile:mediaFile
})
//监听上传进度
uploader.on('media_progress',info=>{
this.progress=parseInt(info.percent*100)
})
//上传结束时，将url存到本地
uploader.done().then(doneResult=>{
//保存地址
//console.log(doneResult)
//console.log(this.fileId)
this.fileId=doneResult.fileId
this.videoURL=doneResult.video.url
//将视频的第一帧保存为封面不需要封面的可以直接忽略掉以下代码
constcanvas=document.createElement('canvas')
constimg=document.getElementById('video_img')
constvideo=document.getElementById('video')
video.setAttribute('crossOrigin','anonymous')
canvas.width=video.clientWidth
canvas.height=video.clientHeight
video.onloadeddata=(res)=>{
canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height)
constdataURL=canvas.toDataURL('image/png')
img.setAttribute('src',dataURL)
//拿到base64的字符串，并保存到本地
this.imgBase=dataURL.split(',')[1]
}
})
}
},
//点击删除时
handleRemove(file,fileList){
console.log(file,fileList.length)
}
}

大功告成，需要其他功能的小伙伴请自行参考腾讯云官方demo，去腾讯云文档官网看，不要看npm！！！最后附上成品样式图0.0，右边空白是我预留的视频预览区域

总结

到此这篇关于Vue实现腾讯云点播视频上传功能的实现代码的文章就介绍到这了,更多相关vue腾讯云点播视频上传内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue实现腾讯云点播视频上传功能的实现代码

热门推荐

随机推荐