vue 获取视频时长的实例代码
作者:大稳·杨 时间:2024-04-09 10:49:16
直接通过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
标签:vue,视频,时长
0
投稿
猜你喜欢
MySQL服务维护笔记第1/2页
2024-01-27 02:08:03
Python OpenCV实现识别信用卡号教程详解
2021-08-12 03:50:27
js使用eval解析json(js中使用json)
2024-04-19 10:00:31
vue3动态路由刷新后空白或者404问题的解决
2023-07-02 16:58:39
SQL Server高级内容之case语法函数概述及使用
2024-01-13 20:40:12
python 实现打印扫描效果详情
2022-04-20 18:29:50
Python正则表达式中flags参数的实例详解
2021-09-23 10:43:41
PHP之mysql位运算案例讲解
2023-06-13 06:16:19
python字典排序的方法
2021-06-16 03:43:40
详解Django+Uwsgi+Nginx 实现生产环境部署
2022-11-10 10:37:41
MySQL并发更新数据时的处理方法
2024-01-21 13:57:00
Python探索之pLSA实现代码
2022-01-03 11:30:28
详解Selenium 元素定位和WebDriver常用方法
2021-10-05 01:45:14
Python的Web框架Django介绍与安装方法
2021-03-06 05:46:12
几种修复ACCESS数据库的实用方法
2008-11-20 17:37:00
一个小技巧mysql命令行分页
2011-01-29 16:33:00
python实现烟花小程序
2022-10-02 09:45:23
pytorch Dropout过拟合的操作
2023-11-26 16:12:18
人性化设计用文字注入情感
2007-08-22 08:59:00
WEB3.0时代的开放与聚合
2008-08-21 17:19:00