vue + antd-vue + 騰訊雲點播 完成視頻上傳功能

前期准備

1、npm install vod-js-sdk-v6 或 yarn add vod-js-sdk-v6

2、在main.js中
import TcVod from 'vod-js-sdk-v6'
Vue.prototype.$TcVod = TcVod

注：

1、獲取騰訊雲上傳簽名函數請務必使用函數表達式方式定義。否則不生效也不報錯。詳見下方代碼let getVideoSignature=()=> {}

2、代碼過多，直接看重點，騰訊雲上傳功能具體實現是在下方uploadVideoFile()函數里

3、更多詳情可見官網文檔： https://cloud.tencent.com/document/product/266/9219

圖片示例

未上傳

上傳中

上傳完成

代碼示例

<template>
<div class="video_upload_item">
    <div class="video_upload_title">
          <span>視頻文件上傳</span>
    </div>
    <div class="video_upload_content">
          <input type="file" accept=".mp4" @change="uploadVideoChanged($event)" />   //選擇視頻文件
          <a-button type="primary" style="margin-right: 10px" @click="uploadVideoFile">{{!vIsUploading?'上傳視頻':'正在上傳'}}</a-button>   ////騰訊雲點播上傳視頻
          <a-button @click="uploadVideoFileCancel" v-show="vIsUploading">取消上傳</a-button>     ////取消上傳
          <div class="video_upload_progress">   //上傳進度條
                <a-progress :percent="vProgress*100" :status="vStatus" />
          </div>
          <div class="file_res" v-if="newsVideoUrl">   
                <div class="newsVideoUrlStyle">{{newsVideoUrl}}</div>   //展示視頻文件地址
                <div class="cancelUrl" @click="cancelUrl"><span class="iconfont iconquxiao2"></span></div>  //刪除文件地址
          </div>
    </div>
</div>
</template>

<script>
import api from '../../api/api.js'
export default {
    name:'demo',
    data(){
        return{
            newsVideoUrl: '',  //視頻文件地址
            fileId: '',  //文件id

            vFile: {},  //視頻文件File對象
            vIsFileExist:false,  //File對象是否存在
            vUploader:{},  //騰訊雲上傳的初始化對象
            vProgress: 0,  //視頻上傳進度
            vStatus:'active',  //視頻上傳狀態,string類型： active正在上傳，success成功，exception失敗
            vIsUploading:false,  //是否正在上傳
        }
    },
    methods:{
        //選擇視頻文件
        uploadVideoChanged(e){
            if(e.currentTarget.files[0]){  //選擇了文件
                if(e.currentTarget.files[0].type=='video/mp4'){
                    this.vFile = e.currentTarget.files[0]  //獲取上傳文件中的File對象信息
                    this.vIsFileExist=true
                }else{
                    this.$message.warning('僅支持mp4格式的視頻上傳')
                }
                // console.log(vFile.size/1024/1024)
            }else{  //取消選擇文件
                this.vFile = {}
                this.vIsFileExist=false
            }
        },
        //騰訊雲點播上傳視頻
        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.$axios.post(`${api.base}/uploadVideo?type=2`).then(res=>{  //獲取簽名
                    if(res.data.code==200){
                        return res.data.data
                    }
                }).catch(()=>{})
            }
            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
                this.fileId=res.fileId
            }).catch(()=>{
                this.$message.warning('視頻文件上傳失敗')
                this.vStatus='exception'
                this.vIsUploading=false
            })
        },
        //取消上傳
        uploadVideoFileCancel(){
            this.vUploader.cancel()
            this.$message.info('視頻文件上傳已取消')
            this.vStatus='active'
            this.vProgress=0
            this.vIsUploading=false
        },
        
        //刪除文件地址
        cancelUrl(){
            this.newsVideoUrl=""
            this.vStatus='active'
            this.vProgress=0
        },
    }
}
</script>