在 Angular 中获取文件元数据答案

【问题标题】：Get file metadata in Angular在 Angular 中获取文件元数据
【发布时间】：2019-08-07 02:00:13
【问题描述】：

选择上传文件时，如何以角度形式获取视频/音频持续时间？

我已通过此事件侦听器获取 .html 格式的每个文件：

(change)="fileSelected($event)"

在 .ts 文件中有这个代码：

attachedFile;

fileSelected($event) {
  this.attachedFile = <File>event.target.files[0]

  var video = document.createElement('video');
  video.preload = 'metadata';

  video.onloadedmetadata = function() {
    window.URL.revokeObjectURL(video.src);
    var duration = video.duration; // here we have duration time but couldn't use out of this scope
  }

  video.src = URL.createObjectURL(this.attachedFile);

  //not available in fileSelected function scope
  console.log(duration); //undefined
}
var foo = duration; // undefined

【问题讨论】：

Typescript 的代码具有非阻塞性。所以，我认为在调用 video.onloadedmetadata 函数时，console.log(duration) 已经执行了。
但它在 fileSelected 函数中不可用，因此只能在声明之外使用 console.log
你得到的是undefined 错误而不是Reference Error 这意味着同样的语句适用于这里，在设置持续时间之前执行其余代码。
它是正确的，但没有办法将它们分开并且它们同时执行

标签： angular metadata angular7 duration

【解决方案1】：

与check-video-length-on-upload-angular 相关。方法如下。

<input type="file" (change)="onVideoChange($event)" accept="video/mp4,video/x-m4v,video/*">
<!-- Preview Section that gets the video metadata for us -->
<video #video autoplay (loadedmetadata)="getDuration($event)" *ngIf="videoUrl" controls class="EYOsld Xpig"
    [attr.src]="videoUrl"> </video>

在组件部分...

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
export class VideoComponent implements OnInit {
    videoForm: FormGroup;
    previewVideoUrl;

    constructor(
        private formBuilder: FormBuilder,
        private domSanitizer: DomSanitizer
    ) { }
    ngOnInit() {
        this.videoForm = this.formBuilder.group({
            'video': [null, [Validators.required, Validators.nullValidator]],
            'duration': [null, [Validators.required, Validators.nullValidator]],
        });

    }

    onVideoChange(event) {
        const file = event.target.files[0];
        this.videoForm.get('video').setValue(file);
        const previewVideoFiles = event.target.files;
        if (previewVideoFiles && previewVideoFiles[0]) {
            this.videoUrl = this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(files[0]));
        }
    }

    getDuration(e) {
        const duration = e.target.duration;
        `
        Note the duration is in seconds, hence if you want the duration in minutes the you would have
        /*
            duration = duration / 60 ;
        */
        If you would want to duration in hours, 
        /* 
            duration = (duration / 60) / 60
        */
        `
        this.videoForm.get('duration').setValue(duration);
    }
}



// Final note remember to import `ReactiveFormsModule` from '@angular/forms' and add ReactiveFormsModule in imports section in app.module.ts

【讨论】：