vue element-upload上传视频或音频获取视频时长
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
做这步操作主要是后端要求传视频的时长duration这个字段,获取方法
第一种:
<el-upload class="upload-demo"
:multiple="multiple"
:before-upload="getVideoToken"
action="http://up-z2.qiniu.com"
:on-success="successVideo"
:data="uploadToken"
:file-list="fileList"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
//js部分:
//第一种在上传文件之前的钩子函数里获取
getVideoToken(file){
var url = URL.createObjectURL(file);
var audioElement = new Audio(url);
var duration;
audioElement.addEventListener("loadedmetadata",
function() {
duration =parseInt(audioElement.duration); //时长为秒,取整
console.log(duration); });
}
//第二种在上传成功后获取
successVideo: function (response, file, fileList) {
var url = URL.createObjectURL(fileList[0].raw);
var audioElement = new Audio(url);
var duration;
audioElement.addEventListener("loadedmetadata",
function() {
duration =parseInt(audioElement.duration) ; //时长为秒
console.log(duration); });
}
注:如果上传多个视频文件 要for循环
successVideo: function (response, file, fileList) {
for(let i=0;i<fileList.length;i++){
var url = URL.createObjectURL(fileList[i].raw);
var audioElement = new Audio(url);
var duration;
audioElement.addEventListener("loadedmetadata",
function() {
duration =parseInt(audioElement.duration) ; //时长为秒
console.log(duration);
});
}
}
//第三种不使用事件监听
successVideo: function (response, file, fileList) {
var url = URL.createObjectURL(fileList[0].raw);
var audioElement = new Audio(url);
var duration;
//扩展 onloadedmetadata 视频加载完执行,onload图片加载完执行
audioElement.onloadedmetadata = () => {
duration = parseInt(audioElement.duration); //时长为秒,取整
};
}
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)