web-dev-qa-db-ja.com

Angular 6マルチパートフォームのポストポストには、ポストされたオブジェクトの添付ファイルは含まれません。

Angular 6を介してAPIにファイルと一緒にフォームを送信しようとしていますが、送信されるオブジェクトが送信しているにもかかわらず、投稿にファイルが含まれていません。

コンソールログを見ると、予想される量、amount： "amount"、invoicefile：File ....が表示されますが、送信リクエストでは、フィールドにinvoicefile：{}が表示され、ファイルは反対側で受信されます。最後にいくつかの写真が含まれています。

最後に、私のAPIはすべてのフィールドが欠落していると言っていますが、別の問題があると思います。

コンポーネントは次のようになります。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { first } from 'rxjs/operators';
import { FormGroup, FormBuilder, FormControl, Validators, FormArray, ReactiveFormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

import { AlertService } from '../_services';
import { InvoiceService } from '../_services';
import { Invoice } from '../_models';

@Component({
  selector: 'app-registerinvoice',
  templateUrl: './registerinvoice.component.html',
  styleUrls: ['./registerinvoice.component.css']
})
export class RegisterinvoiceComponent implements OnInit {
  public registerForm: FormGroup;
  public submitted: boolean;

  constructor(
    private router: Router,
    private invoiceService: InvoiceService,
    private alertService: AlertService,
    private http: HttpClient,

  ) { }
  fileToUpload: File = null;

  ngOnInit() {
    this.registerForm = new FormGroup({
      serial: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
      amount: new FormControl('', [<any>Validators.required, <any>Validators.minLength(4)]),
      debtor: new FormControl('', [<any>Validators.required, <any>Validators.minLength(10)]),
      dateout: new FormControl('', [<any>Validators.required, <any>Validators.minLength(8)]),
      expiration: new FormControl('', [<any>Validators.required, <any>Validators.minLength(8)]),
    });
  }
  handleFileInput(files: FileList){
    this.fileToUpload=files.item(0);
  }

  deliverForm(invoice: Invoice, isValid) {
    this.submitted=true;
    if (!isValid){
      return;
    }
    invoice.invoicefile=this.fileToUpload;
    console.log(invoice);
    console.log(typeof(invoice.invoicefile));
    this.invoiceService.create(invoice)
      .pipe(first())
      .subscribe(
        data => {
          this.alertService.success('Invoice successfully uploaded', true);
          this.router.navigate(['/profile']);
        },
        error => {
          this.alertService.error(error);
        });
  }

}

投稿を提供するサービスが続きます：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Http } from '@angular/http';
import { Invoice } from '../_models';
import { FormGroup } from '@angular/forms';

const HttpUploadOptions = {
  headers: new HttpHeaders({ "Content-Type": "multipart/form-data" })
}
@Injectable({
  providedIn: 'root'
})
export class InvoiceService {

  constructor(
    private http: HttpClient
  ) { }
  create(invoice: Invoice){
    return this.http.post('/api/v1/invoices/', invoice, HttpUploadOptions)
  }
}

そして最後にクラス：

export class Invoice {
    id: any;
    serial: any;
    amount: any;
    debtor: any;
    dateout: any;
    expiration: any;
    fid: any;
    invoicefile: File;
}

正しく見えるコンソールログ： enter image description here

そして、ファイルが欠落している発信リクエスト： enter image description here

編集：

Createのサービスコードは次のようになります。

create(invoice: Invoice){
    let payload=new FormData();
    payload.append('amount', invoice.amount);
    payload.append('debtor', invoice.debtor);
    payload.append('serial', invoice.serial);
    payload.append('dateout', invoice.dateout);
    payload.append('expiration', invoice.expiration);
    payload.append('invoicefile', invoice.invoicefile);
    return this.http.post('/api/v1/invoices/', payload, HttpUploadOptions)
  }

そして、応答は次のようになります。私には奇妙に見えますが、私はまだバックエンドからいくつかのエラーを受け取っていますが、それは別の質問です。 enter image description here

angularfiletypescriptpostfile-upload
10
Marcus Grass

POSTリクエストの本文は実際にはJSONであり、希望どおりのMultipartではありません（Content-Typeヘッダーの内容にかかわらず）。

これを修正するには、FormDataオブジェクトを作成し、代わりにリクエストで使用する必要があります。

let input = new FormData();
// Add your values in here
input.append('id', invoice.id);
input.append('invoiceFile', invoice.invoiceFile);
// etc, etc

this.http.post('/api/v1/invoices/', input, HttpUploadOptions)
23
user184994

この問題を修正するには、ヘッダーからmultipart/form-dataを削除します

const HttpUploadOptions = {
  headers: new HttpHeaders({ "Content-Type": "multipart/form-data" })
}

解決

const HttpUploadOptions = {
  headers: new HttpHeaders({ "Accept": "application/json" })
}
15
user2617449

私は以前にエラーを与えていたこれを持っていました

const formData = new FormData();
formData.append(...);
this.http.post(apiUrl, {formData});

オブジェクトをブレースから削除しましたが、うまくいきました

this.http.post(apiUrl, formData);
2
AbdulRehman