Vue combined with vod-js-sdk-v6 to upload video to Tencent cloud on-demand component
Upload official documents of vod-js-sdk-v6 on Tencent Cloud Web
Introduction
For business needs, Vue combines vod-js-sdk-v6 to upload video to Tencent cloud on-demand component
Mainly rely on instructions (install first, steps omitted)
{
"element-ui": "2.11.1",
"vue": "^2.6.10",
"vue-router": "^3.0.1",
"vod-js-sdk-v6": "^1.2.3"
}
text
1. Components
src/components/UploadVideo/index.vue
<template>
<div>
<input
:id="id"
type="file"
style="display: none;"
name="single"
multiple
:accept="accept"
@change="selectedFile"
/>
<el-button size="small" type="primary" :loading="loading" @click="handleOpenFile()">
<i class="fa fa-upload" />
{
{ buttonName }}
</el-button>
<div v-if="isShowTips" class="el-upload__tip clear-margin-top">{
{ tips }}</div>
<el-progress v-if="loading" :percentage="progress" />
</div>
</template>
<script>
// 获取上传签名接口，根据自己项目更换
import {
getVodSignature } from '@/api/upload.js'
import TcVod from 'vod-js-sdk-v6'
export default {
name: 'UploadVideo',
props: {
// 文件选取限制
accept: {
type: String,
default: 'video/*'
},
// 是否显示提示
isShowTips: {
type: Boolean,
default: false
},
// 最大上传文件的大小
maxFileSize: {
type: Number,
default: 500
},
// 提示内容
tips: {
type: String,
default: ''
},
// 按钮名称
buttonName: {
type: String,
default: '点击上传'
}
},
data() {
return {
id: 'upload-video-id-' + +new Date(),
// 进度
progress: 0,
loading: false
}
},
methods: {
// 打开文件
handleOpenFile() {
document.getElementById(this.id).click()
},
// 选择好文件
selectedFile($event) {
const file = $event.target.files[0]
if (file) {
// loading..
this.loading = true
// 上传
this.upload(file)
}
},
// 弹出message
toastMessage(message) {
this.$message.error(message)
this.loading = false
},
// 判断文件是否符合类型
upload(file) {
console.log(file)
if (this.accept.includes('video') && !file.type.includes('video')) {
this.toastMessage('上传文件必须是视频！！！')
return
}
this.start(file)
},
// 自定义上传
async start(file) {
try {
// 获取签名 （这里必须定义为函数，tcVod才可识别）
const getSignature = async function() {
const {
data } = await getVodSignature()
return data
}
// 前文中所述的获取上传签名的函数
const tcVod = new TcVod({
getSignature })
// 视频，类型为 File
const uploader = tcVod.upload({
videoFile: file })
/*
新版本[email protected] 官方文档中监听方法'video_progress'已修改为'media_progress',
源码中是两种都支持的，建议用'media_progress'
*/
// 监听上传进度
uploader.on('video_progress', info => {
this.$emit('uploadProgress', parseInt(info.percent * 100))
this.progress = parseInt(info.percent * 100)
})
// 监听上传完成
const {
fileId,
video: {
url }
} = await uploader.done()
this.$emit('subUploadSucceed', {
url, fileId })
this.loading = false
} catch (error) {
console.log(error)
}
}
}
}
</script>
<style lang="scss" scoped>
.clear-margin-top {
margin-top: 0;
}
</style>
2. Use
<template>
<div>
<div v-show="url">
<video :src="url" />
</div>
<app-upload-video
:button-name="上传视频"
@subUploadSucceed="getVideoUploadSucceedResult"
/>
</div>
</template>
<script>
import AppUploadVideo from '@/components/UploadVideo'
export default {
name: 'GoodsForm',
components: {
AppUploadVideo
},
data() {
return {
url: ''
}
},
methods: {
// 视频上传成功
getVideoUploadSucceedResult(url) {
this.url = url
}
}
}
</script>
Reference link
Upload official documents of vod-js-sdk-v6 on Tencent Cloud Web