Vue 3 中文件上传交互怎么处理音频文件的时长获取-Vue.js-PHP中文网

vue 3 中通过 url.createobjecturl 创建临时 blob url 并用 audio 元素监听 loadedmetadata 事件可本地快速获取音频时长，需设置 preload="metadata"、及时 revokeobjecturl 释放内存，并注意格式兼容性与移动端限制。

vue 3 中文件上传交互怎么处理音频文件的时长获取

在 Vue 3 中处理音频文件上传时获取其时长，核心是**不依赖服务端、不在 DOM 中渲染 audio 标签、也不等待完整文件加载**，而是利用浏览器原生的 Audio（或 HTMLMediaElement）对象配合 loadedmetadata 事件，在本地快速提取元数据。

关键前提：用 URL.createObjectURL 创建临时地址

用户选择文件后，需先生成浏览器可识别的临时 URL，这是后续解析的基础：

调用 URL.createObjectURL(file) 得到一个 blob URL（如 blob:https://xxx/abcd-1234）
该 URL 可被 new Audio() 或 new Video() 直接使用，无需插入页面
注意：操作完成后应调用 URL.revokeObjectURL(url) 释放内存，尤其在频繁上传场景下

正确监听时长：用 loadedmetadata，不是 canplay 或 loadeddata

loadedmetadata 是最可靠、最轻量的事件——它只等文件头部元信息（含 duration、width/height 等），对大音频文件极友好。常见误区包括：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

误用 canplay：可能触发过早（尚未解析出 duration），返回 NaN
误用 load 或未设 preload：会尝试加载大量数据，卡顿且不必要
正确做法：显式设置 audio.preload = 'metadata'，再绑定 loadedmetadata

Vue 3 响应式写法示例（组合式 API + TypeScript）

以下是一个可直接复用的逻辑片段，适用于 beforeUpload 或自定义上传钩子中：

const getAudioDuration = (file: File): Promise<number> => {
  return new Promise((resolve, reject) => {
    if (!file.type.startsWith('audio/')) {
      reject(new Error('非音频文件'));
      return;
    }

    const url = URL.createObjectURL(file);
    const audio = new Audio();
    audio.preload = 'metadata';
    audio.src = url;

    const cleanup = () => {
      URL.revokeObjectURL(url);
      audio.remove();
    };

    audio.addEventListener('loadedmetadata', () => {
      const duration = audio.duration;
      cleanup();
      resolve(isFinite(duration) ? duration : 0);
    });

    audio.addEventListener('error', () => {
      cleanup();
      reject(new Error('无法读取音频元数据'));
    });
  });
};

// 在上传前调用
const beforeUpload = async (file: File) => {
  try {
    const duration = await getAudioDuration(file);
    if (duration > 60) {
      ElMessage.warning('音频时长不能超过 60 秒');
      return false;
    }
    // 继续上传逻辑...
    return true;
  } catch (err) {
    ElMessage.error(err.message);
    return false;
  }
};
</number>