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模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 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 采集心得技巧
2009/05/15 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
成教自我鉴定
2013/10/27 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
生产部岗位职责范文
2014/02/07 职场文书
降消项目实施方案
2014/03/30 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
初中生操行评语大全
2014/04/24 职场文书
单位在职证明书
2014/09/11 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
使用MybatisPlus打印sql语句
2022/04/22 SQL Server
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript