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自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 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
PHP Session机制简介及用法
2014/08/19 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
匹配任意字符的正则表达式写法
2010/04/29 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
js登录弹出层特效
2014/03/07 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
Python实现LRU算法的2种方法
2015/06/24 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
python 字符串常用函数详解
2019/09/11 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
基本款天堂:Everlane
2017/05/13 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
幼儿园教学管理制度
2014/02/04 职场文书
服务员岗位责任制
2014/02/11 职场文书
数学教研活动总结
2014/07/02 职场文书
企业务虚会发言材料
2014/10/20 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python