Angular获取视频时长并存储至外部变量问题求助

问题根源 #

你的代码里onloadedmetadata是异步触发的回调函数——只有视频元数据加载完成后才会执行。当你调用setFileInfo(file)后立刻去读取file.duration、alert或者存数据库时，这个回调还没执行，所以拿到的是undefined。

你在控制台能看到时长，是因为控制台会动态更新对象的属性：当回调执行给file.duration赋值后，你展开控制台里的file对象时会显示最新值，但当时执行console.log(file.duration)的那一刻，值确实还没被赋值。

解决方案：用Promise封装异步操作 #

把获取时长的逻辑封装成Promise，确保拿到时长后再执行后续操作（存数据库、alert等）：

修改后的setFileInfo函数 #

setFileInfo(file: File): Promise<File & { duration: number }> {
  return new Promise((resolve) => {
    const video = document.createElement('video');
    video.preload = 'metadata';
    
    video.onloadedmetadata = () => {
      window.URL.revokeObjectURL(video.src);
      // 给File对象添加duration属性
      const fileWithDuration = file as File & { duration: number };
      fileWithDuration.duration = video.duration;
      resolve(fileWithDuration);
    };

    video.src = URL.createObjectURL(file);
  });
}

调用方式（两种可选） #

方式1：用async/await（推荐）

async handleVideoFile(file: File) {
  // 等待获取到带时长的文件对象
  const fileWithDuration = await this.setFileInfo(file);
  
  // 这里可以正常获取时长
  console.log(fileWithDuration.duration);
  alert(`视频时长：${fileWithDuration.duration.toFixed(2)}秒`);
  
  // 执行存储到数据库的逻辑
  // this.yourService.saveFile(fileWithDuration).subscribe(...);
}

方式2：用.then链式调用

handleVideoFile(file: File) {
  this.setFileInfo(file).then(fileWithDuration => {
    console.log(fileWithDuration.duration);
    alert(`视频时长：${fileWithDuration.duration.toFixed(2)}秒`);
    // 存储到数据库
    // this.yourService.saveFile(fileWithDuration).subscribe(...);
  });
}

TypeScript类型扩展（可选） #

如果你的项目用TypeScript，为了避免类型报错，可以在全局声明文件（比如src/typings.d.ts）里扩展File类型：

declare global {
  interface File {
    duration?: number;
  }
}

内容的提问来源于stack exchange，提问作者Ismail Muhammad