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的图片的切换(以数字的形式)
Feb 14 Javascript
JS实现拖动示例代码
Nov 01 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
微信小程序实现购物车小功能
Dec 30 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+mysql保存和输出文件
2006/10/09 PHP
PHP分页显示制作详细讲解
2008/11/19 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
Django框架实现的分页demo示例
2019/05/25 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
一些.net面试题
2014/10/06 面试题
NET程序员上机面试题
2015/05/23 面试题
JPA的优势都有哪些
2013/07/04 面试题
主管职责范文
2013/11/09 职场文书
探亲假请假条
2014/04/11 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
社区元宵节活动总结
2015/02/06 职场文书
护士先进个人总结
2015/02/13 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL