☰

Angular ファイルのアップロード 質問する

tag-icon • tag-icon angular typescript
Angular ファイルのアップロード 質問する

私はAngularの初心者です。Angular 5のファイルアップロード部分の作成方法を知りたいのですが、チュートリアルやドキュメントを探そうとしていますが、どこにも見つかりません。これについて何かアイデアはありますか？そして私は試しましたng4 ファイルしかし、Angular 5では動作しません

ベストアンサー1

以下は、API へのファイルアップロードの実例です。

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

タイプ の単純な入力タグを定義しますfile。ファイルの選択を処理するための関数を(change)-event に追加します。

<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)ファイル入力タグの -eventで使用する関数を作成します。

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));
}

これは私が仕事で毎日使用している非常にシンプルな実例です。

おすすめ記事