Vue读取文件名、文件大小和媒体时长
【摘要】 <template> <div id="app"> <input type="file" @change="handleChange" /> <audio controls="true" @loadeddata="handleLoad" :src="url"> </audio> </div>
&l...
<template> <div id="app"> <input type="file" @change="handleChange" /> <audio controls="true" @loadeddata="handleLoad" :src="url"> </audio> </div>
</template>
<script>
import { secondsToTime, byteToText, getObjectURL } from "./util.js";
export default {
name: "app", data() { return { url: "", };
}, methods: { handleLoad(event) { let duration = event.target.duration; console.log(duration, secondsToTime(duration)); }, handleChange(event) { let file = event.target.files[0]; console.log(file.name); console.log(file.size, byteToText(file.size)); let url = getObjectURL(file); console.log(url); this.url = url; },
},
};
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
用到的工具函数
// util.js
/**
* 秒 转文本显示 x时y分z秒
* @param {} secs
*/
export function secondsToTime(secs) {
let hoursDiv = secs / 3600;
// 向下取整
let hours = Math.floor(hoursDiv); let minutesDiv = (secs % 3600) / 60;
let minutes = Math.floor(minutesDiv); // 向上取整
let seconds = Math.ceil((secs % 3600) % 60); if (seconds > 59) { seconds = 0; minutes = Math.ceil(minutesDiv);
} if (minutes > 59) { minutes = 0; hours = Math.ceil(hoursDiv);
} let timeStr = ""; if (hours > 0) { timeStr += `${hours}时`;
}
if (minutes > 0) { timeStr += `${minutes}分`;
}
if (seconds > 0) { timeStr += `${seconds}秒`;
}
return timeStr;
}
/**
* 字节大小转显示文本
* @param {} size
*/
export function byteToText(size) {
let mb = Math.floor(size / (1024 * 1024));
let kb = Math.floor(size / 1024); if (mb > 0) { return (size / (1024 * 1024)).toFixed(2) + "MB";
} else if (kb > 0) { return (size / 1024).toFixed(2) + "KB";
} else { return size.toFixed(2) + "B";
}
}
/**
* 创建临时url
* @param {*} file
*/
export function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file);
}
return url;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。
原文链接：pengshiyu.blog.csdn.net/article/details/109911676
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）