Vue实现腾讯云点播视频上传功能的实现代码实现腾讯云点播视频上传功能的实现代码
基于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="videoURL" id="video" autoplay></video>
<img id="video_img" style="width:90px;height:160px;display:none">
</div>
</template>
接下来是一些变量的定义 以及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
评论0