角度2 - ファイルアップロード - ファイルへのアクセス方法？

Question

私は単純なファイルアップロードスクリプトを作成しており、inputの(change)イベントに基づいている実例のみを見つけられました。私。 - https://www.thepolyglotdeveloper.com/2016/02/upload-files-to-node-js-using-angular-2/

<input type="file" id="userfile" class="form-control" 
(change)="fileChangeEvent($event)" name='userfile'> 

これは機能します。それは素晴らしいです。

しかし、ファイル入力をngModelにバインドしようとすると機能しません。

テンプレート

<form class="form-signin" (ngSubmit)="onSubmit(fileForm.value)" #fileForm="ngForm"> 
<input type="file" id="userfile" class="form-control" 
[(ngModel)]="fileUpload.userfile" name='userfile'> 
<input type="text" id="random" class="form-control" 
[(ngModel)]="fileUpload.random" name="random"> 

<button class="btn btn-lg btn-primary btn-block" type="submit">Upload File</button> 
</form> 

component.ts

onSubmit(data){ 
    console.log("Submitted"); 
    console.log(data); 
    } 

のみrandom入力に設定したデータが表示されます。ファイル入力に配置されたファイルは表示されず、ngModelとデータ出力の両方で表示されます（onSubmit(data)）

Answer 1

ファイルがAngular 2でどのように処理されたかに関する問題もありました。 -techアプローチは、Angular 2のサイドステップを形成します。

テンプレートは次のようになります。

private setFile(event) { 
    this._files = event.srcElement.files; 
} 

あなたはその後、それらのファイルを使用することができます。私が使用

<input class="field" type="file" (change)="setFile($event)" /> 

そして、私のファイルにアクセスするには、。

Angular 2で複数の部分のファイルデータをアップロードしても動作しない（最後にチェックした）ので、HTTPプロバイダではなく手動のXHRリクエストを使用する必要があります。 See this answer for details about that。