vue结合el-upload实现腾讯云视频上传功能


Posted in Javascript onJuly 01, 2020

起因

根据需求要实现一个视频上传功能,之前采用七牛云上传,小点视频没问题,大体积视频比如600M左右,再考虑到网速等其他原因就会花费半个小时左右。

后来分析到不仅要考虑上传时间的问题,更重要的是要考虑用户使用4G 网络的情况,考虑用户的流量,线上的视频,不能不做压缩转码,就放到页面上,视频不是图片,不能甩到 cdn 上就行了。 要考虑视频大小,pc 移动端适配,转码,还有防盗版等问题。

最终决定使用腾讯云上传视频,我的项目是web端上传,参考以下链接

官网链接:cloud.tencent.com/document/product/266/9239#.E6.96.AD.E7.82.B9.E7.BB.AD.E4.BC.A0

在项目中的使用

项目使用vue.js + element-ui el-upload组件

引入sdk:

npm install vod-js-sdk-v6
import TcVod from 'vod-js-sdk-v6'

html代码

//上传
 <el-upload
  ref="upload"
  action="filename" 
  :http-request="httpRequest"
  :show-file-list="false">
  <i v-if="videoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>
 
 // 进度条
 <el-progress
   v-if="videoFlag"
   type="circle"
   :percentage="videoUploadPercent"
  ></el-progress>
  • action:上传地址,必填,但我们使用http-request,填任意字符串即可,没有实际意义。
  • http-request:覆盖默认上传行为,我们这里就需要自定义上传行为
  • percentage:进度条进度

js代码

methods:{
 // 视频-自定义地址
  httpRequest(file){
  const _this = this
   // 限制视频格式
   if (["video/mp4", "video/quicktime"].indexOf(file.file.type) == -1) {
    this.$message.error("视频格式有误,上传失败");
    return false;
   }
    // 限制视频小于700M
   const isLt10M = file.file.size / 1024 / 1024 < 700;
   if (!isLt10M) {
    this.$message.error("请上传MP4、MOV格式且不超过700MB的视频哦!");
    return false;
   }
    // 显示进度条从0开始
    _this.videoFlag = true
    this.videoUploadPercent=0
   // 获取视频签名
    const getSignature = async function(){
     return await getuploadsignature({ //这里就是发axios请求
      video_type:'operating_activity' // 参数是和后台定义的,不需要可以不写
     }).then(res => {
       return res
     })
  }

  // 前文中所述的获取上传签名的函数
  const tcVod = new TcVod({
   getSignature:getSignature
   })
  const uploader = tcVod.upload({
   mediaFile: file.file // 这里腾讯云需要获取到file文件里的name,根据你file结构进行填写
  })
  this.uploaderG = uploader // 定义全局用于取消上传

  // 进度
  uploader.on('media_progress', function(info) {
    _this.videoUploadPercent = parseInt(info.percent * 100);
  })

  // 上传成功
  uploader.done().then((doneResult) => {
    _this.videoFlag = false // 关闭进度条
    _this.videoForm.Video = doneResult.fileId // 存储fileId
    // 这里发请求给后端进行转码操作
    const data = {
     file_id:doneResult.fileId, // 腾讯云file_id
     video_type:'operating_activity', // 视频类型
     video_name:'', // 视频名称
     video_url: doneResult.video && doneResult.video.url?doneResult.video.url:'',// 视频地址
    }
    // 腾讯视频转码
    videoProcedure(data)
    .then(res => {
    }).catch(err => {
     console.log(err)
    })
  }).catch( (err) => {
   console.log(err)
  })
}
}

转码需要一定的时间,视频体积越大转码时间越长。
表单提交时将fileId值传给后端,等需要预览视频时,获取fileId后请求后端的视频详情接口,最终播放返回的视频地址即可。

到此这篇关于vue结合el-upload实现腾讯云视频上传功能的文章就介绍到这了,更多相关vue 腾讯云视频上传内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
jQuery 处理网页内容的实现代码
Feb 15 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
js实现点击烟花特效
Oct 14 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 #Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 #Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 #Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 #Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 #Javascript
vue实现购物车列表
Jun 30 #Javascript
vue实现简单图片上传
Jun 30 #Javascript
You might like
php中文件上传的安全问题
2006/10/09 PHP
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
密码强度检测效果实现原理与代码
2013/01/04 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
Vue中props的使用详解
2018/06/15 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
应届生保险求职信
2013/11/11 职场文书
高中打架检讨书
2014/02/13 职场文书
安全宣传标语口号
2014/06/06 职场文书
服装区域经理岗位职责
2015/04/10 职场文书