如何通过 HTML 输入标签获取文件的引用？ （角度2）

我想在 Firebase 中上传图片。但要做到这一点，我必须先获取文件。例如，如何通过 HTML 获取我的计算机的图像？我正在尝试这样做，但我不知道这样做的回报是什么。帮帮我吧伙计们...

<input type="file" name="image" [(ngModel)]="myImage">

您可以使用以下方式引用 DOM 元素ElementRef然后从元素引用中提取上传的文件的数据。使用#variableName引用文件输入。

<input #fileInput (change)="fileUpload()" type="file" name="pic" accept="image/*">

在您的组件类中，使用引用文件输入ViewChild.

import {Component, ElementRef, Renderer2, ViewChild} from '@angular/core'
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{name}}</h2>
      <input #fileInput (change)="fileUpload()" type="file" name="pic" accept="image/*">
    </div>
  `,
})
export class App {
  name:string; 
  @ViewChild('fileInput') el:ElementRef;
  constructor(private rd: Renderer2) {
    this.name = `Angular : File Upload`
  }

  fileUpload() {
    console.log(this.el);
    // Access the uploaded file through the ElementRef
    this.uploadedFile = this.el.nativeElement.files[0]; 

  }
}

我创建了一个示例 plunkerhere https://embed.plnkr.co/N6wudgX6TkAZ7iC3NBAz/.