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

 更新时间:2019年08月20日 10:28:41   作者:大稳·杨  
这篇文章主要介绍了vue 获取视频时长的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

直接通过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 获取视频时长的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎欢迎给我留言,小编会及时回复大家的!

相关文章

  • 基于vue.js组件实现分页效果

    基于vue.js组件实现分页效果

    这篇文章主要为大家详细介绍了基于vue.js组件实现分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • vue实现将数据存入vuex中以及从vuex中取出数据

    vue实现将数据存入vuex中以及从vuex中取出数据

    今天小编就为大家分享一篇vue实现将数据存入vuex中以及从vuex中取出数据,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue+echarts绘制折线图、柱状图和扇形图教程

    vue+echarts绘制折线图、柱状图和扇形图教程

    这篇文章主要介绍了vue+echarts绘制折线图、柱状图和扇形图教程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • highCharts提示框中显示当前时间的方法

    highCharts提示框中显示当前时间的方法

    今天小编就为大家分享一篇关于highCharts提示框中显示当前时间的方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue指令做滚动加载和监听等

    vue指令做滚动加载和监听等

    这篇文章主要介绍了vue指令做滚动加载和监听等,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue2项目中如何使用clipboard复制插件

    vue2项目中如何使用clipboard复制插件

    这篇文章主要介绍了vue2项目中如何使用clipboard复制插件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法

    浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法

    下面小编就为大家分享一篇浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 基于Vue.js+Nuxt开发自定义弹出层组件

    基于Vue.js+Nuxt开发自定义弹出层组件

    这篇文章主要介绍了基于Vue.js+Nuxt开发自定义弹出层组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • Vue根据条件添加click事件的方式

    Vue根据条件添加click事件的方式

    今天小编就为大家分享一篇Vue根据条件添加click事件的方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue数据控制视图源码解析

    vue数据控制视图源码解析

    本篇内容给大家详细分析了关于vue数据控制视图的源码以及重点做了注释,有兴趣的朋友参考学习下。
    2018-03-03

最新评论