vue 获取视频时长的实例代码
作者:大稳·杨 发布时间:2024-04-09 10:49:16
标签: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 获取视频时长的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎欢迎给我留言,小编会及时回复大家的!
来源:https://www.cnblogs.com/dawenyang/archive/2019/08/20/11381234.html
0
投稿
猜你喜欢
- 此文译自Fred Wilson 2010年2月在迈阿密举行的Web未来应用的年会上的演讲谢谢青云推荐了这篇这么好的演说谢谢卓和百忙中抽空帮我
- 扫雷是一个非常经典的WIN游戏,我们教给大家用python语言来写出这个游戏,以下是全部实例代码:#!/usr/bin/python#cod
- 进入:直接输入python即可,如图所示退出:1:输入exit(),回车2:输入quit(),回车3:输入ctrl+z,回车来源:https
- Truncate是SQL中的一个删除数据表内容的语句,用法是:TRUNCATE TABLE [Table Name]。下面是对Truncat
- 许多网站缺乏针对性和友好的导航设计,难以找到连接到相关网页的路径,也没有提供有助于让访客/用户找到所需信息的帮助,用户体验非常糟糕。本期薯片
- 惊现!表面下的隐藏信息——浅谈信息可视化1910年,病卧床上的魏格那(德国气象学家,以“大陆漂移学说”闻名),无意地注视着墙上的世界地图……
- 从接触Python以来,一直都是采用 virtualenv 和 virtualenvwrapper 来管理不同项目的依赖环境,通过 work
- 本文实例为大家分享了Python实现远程操控电脑的具体代码,供大家参考,具体内容如下import poplib import sys imp
- scipy.optimize函数使用简单使用scipy.optimize,训练逻辑回归损失函数,得到权值。scipy.optimize模块包
- 前言本文主要任务是使用通过 tf.keras.Sequential 搭建的模型进行各种花朵图像的分类,主要涉及到的内容有三个部分:使用 tf
- 页面是这样的我尝试了很多次,都不响应。代码是这样的import xlrd###导入数据def read_data(workboo
- 1 、据说python3就没有这个问题了2 、u'字符串' 代表是unicode格式的数据,路径最好写成这个格式,别直接跟字
- 1创建窗口1 turtle.setup(width,height,startx,starty)设置主窗口的大小和位置,width如果是整数,
- 在cmd输入:python -m django --version来源:https://blog.csdn.net/ShellDawn/ar
- 我们调用高德地图的API来计算经纬度#计算地址经纬度import requestsdef geocode(address): paramet
- 根据Nicholas的说法,有四种代码会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的D
- 写在前面好久没更新Blog了,从CRUD Boy转型大数据开发,拉宽了不少的知识面,从今年年初开始筹备、组建、招兵买马,到现在稳定开搞中,期
- 今天主要给大家介绍如何用pyecharts画各种漂亮的数学图形一、基本极坐标图说简单点,基本极坐标图就是圆形的散点图(柱状图或折线图),代码
- 今天,跟大家聊聊gin框架中是如何实现分片输出的。主要分以下4点:分片输出的效果图gin实现分片传输代码http分片传输的基础:transf
- scrapy是一个基于Twisted的异步处理框架,可扩展性很强。优点此处不再一一赘述。下面介绍一些概念性知识,帮助大家理解scrapy。一