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 相关文章推荐
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
小程序实现分类页
Jul 12 Javascript
javascript如何实现create方法
Nov 04 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
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 mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
python基础 range的用法解析
2019/08/23 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python中rb含义理解
2020/06/18 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
美国折扣网站:jClub
2017/08/07 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
小学岗位竞聘方案
2014/01/22 职场文书
学校献爱心活动总结
2014/07/08 职场文书
老公出轨后的保证书
2015/05/08 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏