Vue读取文件名、文件大小和媒体时长

<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>

// 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;
}