web-dev-qa-db-ja.com

angular 4--POSTでファイルをバックエンドに送信する方法

フォームにファイルをアップロードしています。このアップロードされたファイルと他のいくつかのフォームフィールドを使用して、バックエンドへのポストリクエストを作成する必要もあります。

以下は私のコードです：

      fileChange(event) {

        const fileList: FileList = event.target.files;
        if (fileList.length > 0) {
          this.file = fileList[0];
          this.form.get('file_upload').setValue(this.file);
        }
      }


      onClick(){

        const val = this.form.value;

             const testData = {
              'file_upload': this.file,
              'id': val.id,
              'name' : val.name,
              'code': val.code,
          };

        this.http.post('https://url', testData,
          .subscribe(
            response => {
              console.log(response);
            });
        }

アップロードされたファイルを除くすべてのフィールド値がバックエンドに送信されます。アップロードしたファイルとフォームフィールドをバックエンドに送信するにはどうすればよいですか？追加情報が必要かどうかをお知らせください。

angularfile-uploadangular4-forms
4
yer

あなたは単純なパスファイルデータを試しています

'file_upload': this.file,

これは間違っています

ファイルをアップロードする方法はたくさんありますが、私はFormDataを使用するのが好きです。

let testData:FormData = new FormData();
testData.append('file_upload', this.file, this.file.name);
this.http.post('https://url', testData).subscribe(response => {
    console.log(response);
});

詳細はこちら Angleでのファイルのアップロード？

6
dark_gf

サーバーでファイルのアップロードを適切に処理していると仮定します（通常、multerやbusboyなどのあるタイプのnpmパッケージ）。

マルチパートフォームデータを処理するには、angular側でnpmパッケージを使用する必要があります。

ng-2-file-uploadは、その多くの機能の1つです。

https://www.npmjs.com/package/ng2-file-upload

0
borbesaur