[解決済み】Angularのファイルアップロード

質問

Angularの初心者ですが、Angular 5を作成する方法を知りたいです。 ファイルアップロード部分 チュートリアルやドキュメントを探したのですが、どこにも見当たりません。このための任意のアイデア？そして、私は試してみました ng4-ファイル が、Angular 5ではうまくいきません。

どうすればいいですか？

apiへのファイルアップロードの動作例です。

ステップ1：HTMLテンプレート(file-upload.component.html)

単純な入力タグを定義します。 file . に関数を追加します。 (change) -イベントを使用し、ファイルの選択処理を行います。

<div class="form-group">
    <label for="file">Choose File</label>
    <input type="file"
           id="file"
           (change)="handleFileInput($event.target.files)">
</div>

ステップ2：TypeScriptによるアップロード処理（file-upload.component.ts）

選択されたファイルに対してデフォルトの変数を定義します。

fileToUpload: File | null = null;

で使用する関数を作成します。 (change) -イベントを作成します。

handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
}

もし、複数のファイルを選択したい場合は、このファイル配列を繰り返し処理します。

ここで、file-upload.serviceを呼び出して、ファイルアップロード機能を作成します。

uploadFileToActivity() {
    this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
      // do something, if upload success
      }, error => {
        console.log(error);
      });
  }

ステップ3：ファイルアップロードサービス(file-upload.service.ts)

POSTメソッドでファイルをアップロードする場合は FormData というのも、httpリクエストにファイルを追加することができるからです。

postFile(fileToUpload: File): Observable<boolean> {
    const endpoint = 'your-destination-url';
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    return this.httpClient
      .post(endpoint, formData, { headers: yourHeadersConfig })
      .map(() => { return true; })
      .catch((e) => this.handleError(e));
}

というわけで、これは私が毎日仕事で使っている、とても簡単な実例です。