angular - 如何在 Angular Material 中使用输入类型文件

Question

如何在 Angular Material 中使用输入类型文件

您好，我正在使用 Angular 形 Material 进行设计。当我访问 Angular Material 网站时，没有输入类型文件元素。任何人都知道这件事。

Answer 1

如果您只想要一个显示良好的文件输入按钮，这里有一个解决方法。

HTML

<button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
<input hidden (change)="onFileSelected()" #fileInput type="file" id="file">

组件

onFileSelected() {
  const inputNode: any = document.querySelector('#file');

  if (typeof (FileReader) !== 'undefined') {
    const reader = new FileReader();

    reader.onload = (e: any) => {
      this.srcResult = e.target.result;
    };

    reader.readAsArrayBuffer(inputNode.files[0]);
  }
}

受此 Angular Material Github Issue 评论的启发 https://github.com/angular/material2/issues/3262#issuecomment-309000588