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)

									  }

									 }