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
    },
    // 点击上传时
    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, 0, 0, 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，右边空白是我预留的视频预览区域
白嫖了博客这么久，终于是写完了我的第一篇博客，功能相对简单，能看懂就好，hiahia！