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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
深入了解js原型模式
May 30 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
PHP数组相关函数汇总
2015/03/24 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
python开启多个子进程并行运行的方法
2015/04/18 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
个人收入证明范本
2014/09/18 职场文书
作弊检讨书范文
2015/05/06 职场文书
建党伟业电影观后感
2015/06/01 职场文书
光荣之路观后感
2015/06/12 职场文书
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记