Angular TypeError：使用 event.target.file [0] 时无法读取未定义的属性“0”

Question

我目前正在尝试从用户那里获取文件输入并使用 AngularFire 将其存储到 Firebase 存储。由于它是未定义的，我确信他们正在查看的任何文件都是 NULL，但我的 UI 清楚地显示我正在成功输入文件，但是一旦我选择文件，错误就会被捕获。我是否误解了输入如何将信息发送到我的 TypeScript 文件？

这是我的 TS 文件：

import { AngularFirestore } from '@angular/fire/firestore';
import { Component, OnInit, Input, ChangeDetectorRef } from '@angular/core';
import { finalize, tap, map } from 'rxjs/operators';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { SubmitPostService } from './submit-post.service';
import { Post } from '../post.model';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-post-creation',
  templateUrl: './post-creation.component.html',
  styleUrls: ['./post-creation.component.scss']
})
export class PostCreationComponent implements OnInit {

  private uuidv4 = require('uuid/v4');

  // Main task
  task: AngularFireUploadTask;

  // Progress Monitoring
  percentage: Observable<number>;

  // Download URL
  downloadURL: Observable<string>;

  myForm: FormGroup;
  post: Post;
  ref: AngularFireStorageReference;
  files: Observable<any>;

  constructor(
    private formBuilder: FormBuilder,
    private postService: SubmitPostService,
    private storage: AngularFireStorage,
  ) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      title: ['', [Validators.required]],
      artists: ['', [Validators.required]],
      description: '',
      medium: ''
    });

    this.myForm.valueChanges.subscribe(console.log);
  }

  onSubmit() {
    this.post = new Post(
      this.uuidv4(),
      this.myForm.get('artists').value,
      this.myForm.get('title').value,
      new Date(),
      new Date(),
      `images/${Date.now()}_${this.myForm.get('title').value}`,
      this.myForm.get('description').value,
      this.myForm.get('medium').value
      );
    this.postService.submitPost(this.post);
  }

  upload(event: any) {
    console.log('Upload successful');
    try {
      const file = event.target.file[0];

      // The storage path
      const path = `images/${Date.now()}_${file.name}`;

      // Reference to storage bucket
      this.ref = this.storage.ref(path);

      // Main Task
      this.task = this.ref.put(file);

      // Tracks progress
      this.percentage = this.task.percentageChanges();

      this.percentage = this.task.snapshotChanges()
      .pipe(map(s => (s.bytesTransferred / s.totalBytes) * 100));

      this.downloadURL = this.ref.getDownloadURL();

    } catch (err) { console.log(err); }

    }

}

这是我的 HTML：

  <div>
    <div class="progress">
      <progress max="100" [value]="(percentage | async)"></progress>
    </div>
    <h1>Post Creation</h1>
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">

      <mat-form-field>
        <input matInput placeholder="Title" formControlName="title">
      </mat-form-field>

      <br>

      <mat-form-field>
        <input matInput placeholder="Artists" formControlName="artists">
      </mat-form-field>

      <br>

      <mat-form-field>
        <input matInput placeholder="Description" formControlName="description">
      </mat-form-field>

      <br>

      <mat-form-field>
        <input matInput placeholder="Medium" formControlName="medium">
      </mat-form-field>

      <br>

      <input type="file" (change)="upload($event)" accept=".png,.jpg">

      <br>
      <br>

      <button mat-raised-button [disabled]="myForm.invalid" color="primary">Submit Post</button>
    </form>
  </div>
</body>

我已经在 Firestore 中成功创建了 Post 对象，所以这不是我的 firebase 配置未正确初始化的问题。

Answer 1

在您的上传方法中，在const file = event.target.file[0]; 语句中，file 属性应该是复数