elementUI i中的 el-upload上传音频文件获取音频时间长度

在使用 Element UI 的 el-upload 组件上传音频文件并获取音频时长时，你可以使用 HTML5 的 Audio 类。以下是一个简单的示例代码：

<template>
  <el-upload
    :on-change="handleAudioChange"
    :before-upload="beforeUpload"
    action="#">
    <el-button size="small" type="primary">点击上传音频</el-button>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    beforeUpload(file) {
      // 可以在这里添加对上传文件的额外校验
      return false; // 阻止自动上传
    },
    handleAudioChange(file, fileList) {
      // 创建一个 Audio 对象
      const audio = new Audio(URL.createObjectURL(file.raw));
 
      audio.onloadedmetadata = () => {
        // 当音频的元数据加载完成后，获取音频的总时长（单位：秒）
        const duration = audio.duration;
        console.log(`音频时长：${duration} 秒`);
 
        // 处理音频时长获取后的逻辑
        // ...
      };
 
      audio.onerror = () => {
        console.error('音频文件加载出错');
      };
    }
  }
};
</script>

在这个示例中，我们定义了一个 handleAudioChange 方法，该方法在文件改变时被调用。我们使用 Audio 类的实例来加载音频文件，并在其 onloadedmetadata 事件中获取音频时长。注意，这里的 beforeUpload 方法返回 false 来阻止 el-upload 组件自动上传文件。

请确保在真实的应用中添加适当的错误处理和文件校验，以保证用户体验和安全性。