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 相关文章推荐
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
js自定义回调函数
Dec 13 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
javascript表单正则应用
Feb 04 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
vuex分模块后,实现获取state的值
Jul 26 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
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
js脚本实现数据去重
2014/11/27 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python创建和使用字典实例详解
2013/11/01 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
CSS3 文字动画效果
2020/11/12 HTML / CSS
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
产品设计开发计划书
2014/05/07 职场文书
学校春季防火方案
2014/06/08 职场文书
音乐节策划方案
2014/06/09 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
MySQL 不等于的三种使用及区别
2021/06/03 MySQL