web-dev-qa-db-ja.com

angularマテリアルで入力タイプファイルを使用する方法

angularマテリアルの入力タイプファイルの使用方法

こんにちは、私はデザインにangularマテリアルを使用しています。 angularマテリアルサイトに移動すると、入力タイプのファイル要素はありません。誰もがこれについて知っています。

angularangular-materialmaterial-design
14
Hariom Singh

Angular Materialは、ファイルアップロードの回避策をまだサポートしていません。これを実現する別の方法があります。たとえば、外部ライブラリを使用します。

angular-material-fileupload： npmパッケージへのリンク

サポートされる機能：

  • ドラッグアンドドロップ
  • 一般的なアップロード
  • プログレスバー
  • ファイルサイズなど...

ngx-material-file-input： リポジトリへのリンク

サポートされる機能：

  • ngx-mat-file-inputコンポーネント、内部で使用するAngular Material mat-form-field
  • FileValidatorとmaxContentSizeは、ファイルサイズを制限します
  • ByteFormatPipeは、人間が読める形式でファイルサイズをフォーマットします
  • その他の小さなマイナー機能...

更新

外部ライブラリなしで回避策が必要な場合は、こちらの回答を参照してください https://stackoverflow.com/a/53546417/6432698

11
billyjov

必要なのは、きれいに表示されたファイル入力ボタンだけである場合の回避策です。

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

27
JackMorrissey