web-dev-qa-db-ja.com

Angular 5 type = fileの入力からファイル名を取得する方法

似たような質問があることは知っていますが、Angular 5の方法、または少なくとも私が理解している方法ではありません。

私の画像アップロードシステムでは、画像が入力タグに添付されているかどうか、およびファイルの名前を知る必要があります。これが私のコードです：

HTML：

<input 
  type="file" 
  [(ngModel)]="currentInput"
  (change)="onFileSelected($event)"
>

角度：

export class ImageUpload {
    currentInput;

    onFileSelected(event) {
        console.log(this.currentInput);
    }
}

ファイルが添付されているかどうかに関係なく、「currentInput」の値は常に未定義です。タイプが「ファイル」に等しい場合、これは入力でどのように機能しますか？

ありがとう！

angularimageinputngmodel
6
Miger

入力フィールドに名前を付けます。これは必須です https://angular.io/guide/forms#!#ngModel 。また、クラスの外で関数を定義しました。関数とプロパティの両方がクラス内にある必要があります。

Update：データ入力は、ファイル入力タイプではサポートされていません。純粋なJavaScriptを使用して実行する必要があります。

<input 
  type="file" 
  name = "currentInput"
  [(ngModel)]="currentInput"
  (change)="onFileSelected($event)"
>

export class ImageUpload {
  currentInput:any;
  onFileSelected(event) {
    console.log(event.target.files);
    this.currentInput = event.target.files; 
  }
}
0
Komal