Vue实现腾讯云点播视频上传功能的实现代码


Posted in Javascript onAugust 17, 2020

基于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,右边空白是我预留的视频预览区域

Vue实现腾讯云点播视频上传功能的实现代码

总结

到此这篇关于Vue实现腾讯云点播视频上传功能的实现代码的文章就介绍到这了,更多相关vue腾讯云点播视频上传内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript Window及document对象详细整理
Jan 12 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
Vue底层实现原理总结
Feb 17 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
vue使用echarts图表的详细方法
Oct 22 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 #Javascript
three.js着色器材质的内置变量示例详解
Aug 16 #Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 #Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 #Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 #Javascript
Vue使用axios引起的后台session不同操作
Aug 14 #Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 #Javascript
You might like
新52大事件
2020/03/03 欧美动漫
php代码优化及php相关问题总结
2006/10/09 PHP
隐性调用php程序的方法
2015/06/13 PHP
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
js获取视频时长代码
2014/04/10 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
js实现图片局部放大效果详解
2019/03/18 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
原生js实现无缝轮播图效果
2021/01/28 Javascript
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Python中subprocess的简单使用示例
2015/07/28 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
django_orm查询性能优化方法
2018/08/20 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Python Web版语音合成实例详解
2019/07/16 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
小学毕业家长寄语
2014/01/19 职场文书
求职信范文怎么写
2014/01/29 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
清明节寄语2015
2015/03/23 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
Oracle用户管理及赋权
2022/04/24 Oracle