幽灵资源网 Design By www.bzswh.com
基于Vue+ElementUI+vod-js-sdk-v6,完成腾讯云点播视频上传功能
最近做的一个项目,需要用到腾讯云点播的视频上传!!写一个尽可能详细的博客供各位参考,欢迎指正; ok,下面进入正题。
首先是需要用到的依赖:ElementUI、vod-js-sdk-v6、axios
npm i vod-js-sdk-v6 npm i axios
import vue from 'vue' import { Upload, Progress } from 'element-ui' vue.use(Upload) vue.use(Progress)
我采用了ElementUI的手动上传组件,比之自动上传用户体验会更好一点
<template> <div class="upload_video" id="upload_video"> <el-upload class="upload-demo" ref="upload" action="#" :http-request="uploadVideo" //自定义上传 :accept='accept' :limit="1" //上传的文件数量 :on-remove="handleRemove" //文件移除事件 :on-change="handleChange" //文件改变事件 :auto-upload="false"> <el-button slot="trigger" size="small" type="primary">选取视频</el-button> <el-button style="margin-left: 40px;" size="small" type="success" @click="submitUpload">点击上传</el-button> <el-progress class="progress" :text-inside="true" :stroke-width="18" :percentage="progress" status="exception"></el-progress> <div slot="tip" class="el-upload__tip">只能上传mp4文件,且不超过500M</div> </el-upload> <video :src="/UploadFiles/2021-04-02/videoURL">接下来是一些变量的定义 以及sdk的引入
import TcVod from 'vod-js-sdk-v6' export default { data () { return { // 文件列表 fileList: [], // 上传成功后的地址 videoURL: '', // 进度条百分比 progress: 0, // base64图片地址 注:这个是项目需要设置一个默认的视频封面,不需要的忽略就行 imgBase: '', // 上传视频获取成功后拿到的fileID【备用】 fileId: '' } } }最后是具体逻辑
methods: { // 获取签名 这里的签名请求是由后端提供的,只需要拿到后端给的签名请求即可 getVodSignature () { const url = '/bpi/artworkMaking/findSingature' return this.$axios.post(url).then(function (response) { return response.data.data }) }, // 文件列表改变时 将文件列表保存到本地 handleChange (file, fileList) { this.fileList = fileList }, // 点击上传时 submitUpload () { if (this.fileList.length < 1) return this.$MessageBox('请先选取视频,再进行上传', '提示') this.uploadVideo() }, // 自定义上传 uploadVideo (e) { // 当 console.log(this.fileList[0].raw) if (this.fileList.length < 1) { window.alert('您还没有选取文件') } else { //必须以函数的形式返回 sdk参数限制 const getSignature = async () => { const data = await this.getVodSignature() return data } const tcVod = new TcVod({ getSignature: getSignature // 获取上传签名的函数 }) // 获取通过elementui上传到本地的文件 因为参数类型必须为file 不能直接以对象的形式传输 const mediaFile = this.fileList[0].raw const uploader = 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 // 将视频的第一帧保存为封面 不需要封面的可以直接忽略掉以下代码 const canvas = document.createElement('canvas') const img = document.getElementById('video_img') const video = 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) const dataURL = 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,右边空白是我预留的视频预览区域
总结
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...