Angulaire 6 après la demande avec un formulaire multipart ne pas inclure le fichier ci-joint de l'objet affiché

Je suis en train d'envoyer un formulaire, accompagné d'un fichier à mon API par le biais Angulaire 6, mais le poste n'inclut pas le fichier, même si l'objet qui est censé être envoyé ne.

Quand je suis à la recherche sur les journaux de la console je vois ce qui est attendu, le montant:"montant", invoicefile: Fichier....
Mais En sortant de demande indique invoicefile:{}, et maintenant le fichier est reçu sur l'autre côté. Certaines images sont incluses à la fin.

Enfin mon API est à dire à mon, tous les champs sont manquants, mais je pense qu'un autre problème.

Le composant ressemble à ceci:

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

Suivies par le service qui fournit le post:

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

Et enfin la classe:

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

Le journal de la console qui semble correct:

Et sortants de la demande, lorsque le fichier est manquant:

EDIT:

Maintenant le code de la fonction pour créer ressemble à ceci:

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

Et la réponse ressemble à ceci. Un peu bizarre pour moi, et je suis encore en train de quelques erreurs de mon back-end, mais c'est une autre question.