vue 获取视频时长的实例代码


Posted in Javascript onAugust 20, 2019

直接通过element-ui自带的上传组件结合js即可,代码如下:

HTML:     

<el-upload class="upload-demo" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess"
     :before-upload="beforeAvatarUpload">
     <button class="ce-button not-hover primary">
      <i class="ce-icon_upload"></i>
      <span>重新上传</span>
     </button>
    </el-upload>

js:

beforeAvatarUpload(file) {
    var fileName = file.name || ''
    var ext = fileName.split('.')[fileName.split('.').length - 1]
    if (ext !== "doc" && ext !== "docx" && ext !== "xls" && ext !== "xlsx"
     && ext !== "ppt" && ext !== "pptx" && ext !== "pdf" && ext !== "mp4") {
     this.$notify({
      title: "失败",
      message: "上传资源只能是 doc/docx/xls/xlsx/ppt/pptx/pdf/mp4 格式!",
      type: "error",
      duration: 3000
     });
     return false
    }
    // ppt(10MB),word(10MB),excel(5MB)
    if (ext == "doc" || ext == "docx" || ext == "ppt" || ext == "pptx") {
     debugger
     if (parseInt(file.size) > parseInt('10485760‬')) {
      this.$notify({
       title: "失败",
       message: "上传word、ppt文件上限为10MB!",
       type: "error",
       duration: 3000
      });
      return false
     }
    }
    if (ext == 'mp4') { // 获取视频时长
     var url = URL.createObjectURL(file);
     var audioElement = new Audio(url);
     var duration;
     audioElement.addEventListener("loadedmetadata", function (_event) {
      duration = audioElement.duration; //时长为秒,小数,182.36
      this.$parent.$data.wDuration = parseInt(duration)
      console.log(duration);
     });
    }
    this.$parent.$data.wFileName = file.name
    this.$parent.$data.wSize = parseFloat(file.size / 1024).toFixed(2) //获取文件大小
   }

总结

以上所述是小编给大家介绍的vue 获取视频时长的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
vue+elementUI实现图片上传功能
Aug 20 #Javascript
vue+elementUi图片上传组件使用详解
Aug 20 #Javascript
vue集成chart.js的实现方法
Aug 20 #Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 #Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 #Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 #Javascript
Vue实现购物车详情页面的方法
Aug 20 #Javascript
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
详解Python中类的定义与使用
2017/04/11 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
基层党员公开承诺书
2014/05/29 职场文书
销售团队激励口号
2014/06/06 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏