So senden Sie Formulardaten und Datei in derselben Submit mit Angular 4 in .NET Core

Question

Ich versuche, in der Suppliers-Tabelle einen neuen Eintrag hinzuzufügen. In dieser Tabelle ist auch ein weiterer verknüpft, in dem die Verträge mit jedem Lieferanten gespeichert sind. Die gewünschte Funktionalität ist es, sowohl die Daten für den neuen Lieferanten als auch den Vertrag in der gleichen Form einzureichen, aber ich kann es nicht funktionieren lassen.

Ich bin in der Lage, einen neuen Lieferanten und nach dem Vertrag durch das Hochladen der Datei separat in einem anderen Formular, aber nicht in der gleichen übermitteln Aktion hinzufügen.

Wie kann ich das tun?

Meine Form sieht wie folgt aus:

<form class="form-material m-t-40" enctype="multipart/form-data"> 

    <div class="form-group has-warning"> 
     <h4 class="entity-info"><label for="denumire" class="label-has-danger"> Denumire furnizor </label></h4> 
     <input type="text" id="denumire" name="denumire" class="form-control" placeholder="Denumire" [(ngModel)]="furnizor.denumire" #denumire="ngModel"> 
    </div> 
    <div class="form-group has-warning"> 
     <h4 class="entity-info"><label for="cod" class="label-has-danger"> Cod intern furnizor </label></h4> 
     <input type="text" id="cod" name="cod" class="form-control" placeholder="Cod intern" [(ngModel)]="furnizor.cod" #cod="ngModel"> 
    </div> 
    <div class="form-group has-warning"> 
     <h4 class="entity-info"><label for="cod" class="label-has-success"> Cod de inregistrare fiscala furnizor </label></h4> 
     <input type="text" id="codIntern" name="codIntern" class="form-control" placeholder="Cod" [(ngModel)]="furnizor.codIntern" #codIntern="ngModel"> 
    </div> 
    <div class="form-group has-warning"> 
     <h4 class="entity-info"><label for="adresa" class="label-has-success"> Adresa </label></h4> 
     <input type="text" id="adresa" name="adresa" class="form-control" placeholder="Adresa" [(ngModel)]="furnizor.adresa"> 
    </div> 
    <div class="form-group has-warning"> 
     <h4 class="entity-info"><label for="persoanaContact" class="label-has-success"> Persoana Contact </label></h4> 
     <input type="text" id="persoanaContact" name="persoanaContact" class="form-control" placeholder="Persoana Contact" [(ngModel)]="furnizor.persoanaContact" #reprezentant="ngModel"> 
    </div> 
    <div class="form-group has-warning"> 
     <h4 class="entity-info"><label for="telefon" class="label-has-success"> Telefon </label></h4> 
     <input type="tel" id="telefon" name="telefon" class="form-control" placeholder="Telefon" [(ngModel)]="furnizor.telefon" #telefon="ngModel"> 
    </div> 
    <div class="form-group has-warning"> 
     <h4 class="entity-info"><label for="dataIncepereContract" class="label-has-success"> Data incepere contract </label></h4> 
     <input type="date" class="form-control m-b-40" placeholder="2017-06-04" id="dataIncepereContract" name="dataIncepereContract" [(ngModel)]="furnizor.dataIncepereContract" #dataIncepereContract="ngModel"> 
    </div> 

    <div class="form-group has-warning"> 
     <h4 class="entity-info"><label for="dataExpirareContract" class="label-has-success"> Data expirare contract </label></h4> 
     <input type="date" class="form-control m-b-40" placeholder="2017-06-04" id="dataExpirareContract" name="dataExpirareContract" [(ngModel)]="furnizor.dataExpirareContract" #dataExpirareContract="ngModel"> 
    </div> 

    <input type="file" #fileInput> 

    <button type="button" class="btn btn-md btn-add animated flipInX flipInY lightSpeedIn slideInUp" (click)="submit()"> 
     <i class="fa fa-floppy-o"></i> Save 
    </button> 
</form> 

ich eine Menge von Optionen und Kombinationen für die Datei versucht haben und die anderen Formularfelder, aber keine Arbeit.

Meine ts Datei liest die Datei-Eingabe wie folgt aus:

... 

@ViewChild('fileInput') fileInput: ElementRef; 

... 
submit() { 
    var nativeElement: HTMLInputElement = this.fileInput.nativeElement; 

    if (nativeElement.files) this.file = nativeElement.files[0]; 
    this.furnizorService.create(this.furnizor, this.file).subscribe(() => {}); 
} 

Mein Service:

create(furnizor: any, fileToUpload: any) { 

    let input = new FormData(); 
    input.append("file", fileToUpload); 

    furnizor.file = input; 

    return this.http.post('/api/furnizor', furnizor).map(res => res.json()); 
} 

Und in meinem C#-Controller Ich habe versucht:

[HttpPost("/api/furnizor")] 
    public async Task<IActionResult> CreateFurnizor([FromBody]FurnizorResource furnizorResource) 
    { 
    ... 
    } 

Wo ich hinzugefügt neue Eigenschaft

public IFormFile file { get; set; } 

in FurnizorResource, aber wenn ich dies tun, ist furnizorResource nicht zugeordnet und ist null.

Ich versuchte auch, sie getrennt zu senden (nur versuchen):

[HttpPost("/api/furnizor")] 
public async Task<IActionResult> CreateFurnizor([FromBody]FurnizorResource furnizorResource, IFormFile file) 
{ 
... 
} 

(Was da ich nicht 2 „Körper“ senden kann Elemente im Angular-Dienst nicht offensichtlich funktioniert). Mit dieser Methode sind die furnizorResource-Daten korrekt, aber natürlich ist die Datei null ...

Wie kann ich Json-Daten und eine Datei gleichzeitig in Angular 4.3.6 und ASP.NET Core 2 posten?

Answer 1

Ich verstehe, dass Ihre beide, Winkel- und C# muß die Eigenschaft fornitureResources sein, dass es eine Reihe von FornitureResource seiner

interface Forniture 
{ 
    cod:number; 
    ... 
    fornitureResources :IFromFile[] 
} 

So, zum Beispiel

let myforniture={ 
    cod:1, 
    ... 
    fornitureResources:[ 
     { file:"file1"}, 
     { file:"file2"} 
    ] 
    } 

Wenn Sie "myforniture" mit this.http.post ('/ api/furnizor', myforniture) senden, müssen Sie eine "Forniture" in Ihrem API

Answer 2

bekommen sein Haben Sie so etwas versucht, ? So benutze ich es in meiner App und es funktioniert.

var formData = new FormData() 
for (var key in model) 
    formData.append(key, furnizor[key]) 

formData.append('file', fileToUpload) 

let headers = new Headers({ 'Content-Type': 'multipart/form-data' }) 
let options = new RequestOptions({ headers: headers }) 
return this.authHttp.post('/api/furnizor', formData, options).map(res => res.json())