基於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
  },// 點選上傳時
  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,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，右邊空白是我預留的視訊預覽區域

總結

到此這篇關於Vue實現騰訊雲點播視訊上傳功能的實現程式碼的文章就介紹到這了,更多相關vue騰訊雲點播視訊上傳內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！