vue 接入 vod-js-sdk-v6.js 完成視頻上傳

東西有點多，耐心看完。按照操作一步一步來，絕對能成功

 

首先：npm 引入

npm install vod-js-sdk-v6

 

mian.js  全局引入 

//騰訊雲點播
import TcVod from 'vod-js-sdk-v6'
Vue.prototype.$TcVod = TcVod

 

其次： vue 文件的引用

<input type="file" accept=".mp4" @change="uploadVideoChanged($event)" />   

注意： 這里 設置 type=“file” 是關鍵，一定要設置  type="file" ， 然后就是 一定要用 @change 事件 ，event 一定得傳，用來獲取整個 input 的

下面的可以直接復制粘貼進去了，但是獲取簽名的方法一定得改成自己的，別瞎抄。

 

 

data 參數部分

newsVideoUrl: '',  //視頻文件地址
      vFile: {},  //視頻文件File對象
      vIsFileExist:false,  //File對象是否存在
      vUploader:{},  //騰訊雲上傳的初始化對象
      vProgress: 0,  //視頻上傳進度
      vStatus:'active',  //視頻上傳狀態,string類型： active正在上傳，success成功，exception失敗
      vIsUploading:false,  //是否正在上傳
      signature : '',// 獲取簽名

 

這里的 create 用來獲取簽名

 

create 部分： 用來獲取簽名

this.getUploadSignature()

 

獲取簽名 的接口請替換成 后端提供的獲取簽名接口

 

//獲取簽名
    getUploadSignature(){
      getUploadSignature().then(res=>{
        this.signature = res.data
      })
    },

    //調用本地文件列表
    //選擇視頻文件
    uploadVideoChanged(e){
      if(e.currentTarget.files[0].type=='video/mp4'){
        this.vFile = e.currentTarget.files[0]  //獲取上傳文件中的File對象信息
        this.vIsFileExist=true
      }else{
        this.$message.warning('僅支持mp4格式的視頻上傳')
      }
    },

    //騰訊雲點播上傳視頻
    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.signature
      }
      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
      }).catch(()=>{
        this.$message.warning('視頻文件上傳失敗')
        this.vStatus='exception'
        this.vIsUploading=false
      })
    },

 

 

然后就能獲取 文件 id了，最后根據自己的需求去使用這個文件 id

 

能發現的值得我給你提供一個參考地址，

提別提供： https://www.cnblogs.com/huihuihero/p/13162323.html