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;
}
編集:
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)
}
そして、応答は次のようになります。私には奇妙に見えますが、私はまだバックエンドからいくつかのエラーを受け取っていますが、それは別の質問です。
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)
この問題を修正するには、ヘッダーからmultipart/form-dataを削除します
const HttpUploadOptions = {
headers: new HttpHeaders({ "Content-Type": "multipart/form-data" })
}
解決
const HttpUploadOptions = {
headers: new HttpHeaders({ "Accept": "application/json" })
}
私は以前にエラーを与えていたこれを持っていました
const formData = new FormData();
formData.append(...);
this.http.post(apiUrl, {formData});
オブジェクトをブレースから削除しましたが、うまくいきました
this.http.post(apiUrl, formData);