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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
javascript实现切割轮播效果
Nov 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实现简单的随机抽奖小程序
2016/01/05 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python中enumerate函数代码解析
2017/10/31 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python实现常见的回文字符串算法
2018/11/14 Python
postman传递当前时间戳实例详解
2019/09/14 Python
python调用接口的4种方式代码实例
2019/11/19 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
秋季运动会表扬稿
2014/01/16 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
党支部考察意见范文
2015/06/02 职场文书
使用Python开发冰球小游戏
2022/04/30 Python
Hive导入csv文件示例
2022/06/25 数据库
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技