Angular 2 form Daten und JSON-Daten senden in derselben Anfrage

Question

Ich mache einen Datei-Upload-Vorgang mit Angular 2 und HTML-Datei-Upload-Steuerelement. Mein Code die Datei zum Hochladen ist wie folgt -

saveDocument(value: any) { 
     let apiEndPoint: any = 'http://localhost:58736/LandingPage/addUpdateDocument'; 
     let fi = this.FileInput.nativeElement; 
     if (fi.files && fi.files[0]) { 
      let fileToUpload = fi.files[0]; 
      let formData: FormData = new FormData(); 
      formData.append('newDocument', fileToUpload, value); 
      let headers = new Headers(); 
      headers.append('Accept', 'application/json'); 
      let options = new RequestOptions({ headers: headers }); 
      this._http.post(`${apiEndPoint}`, formData , options).map(res => res.json()).catch(error => Observable.throw(error)).subscribe(
       data => console.log('success'), 
       error => console.log(error)) 
     } 
    } 

ich eine ASP.Net MVC serverseitige Methode haben wie folgt -

[System.Web.Http.HttpPost] 
     public string addUpdateDocument(HttpPostedFileBase newDocument) 
     { 
      string responseMessage = string.Empty; 
      try 
      { 
       if (newDocument.ContentLength > 0) 
       { 
        string _FileName = Path.GetFileName(newDocument.FileName); 
        string _path = Path.Combine(Server.MapPath("~/upload"), _FileName); 
        newDocument.SaveAs(_path); 
       } 
       responseMessage = "Upload Successfull !!"; 
      } 
      catch(Exception ex) 
      { 
       responseMessage = "Upload Successfull !!"; 
      } 

      return responseMessage; 
     } 

    } 

Dies funktioniert gut, solange ich nur das Hochladen die Datei. Aber ich möchte neben der Datei noch weitere Informationen senden. Ich habe versucht, die Funktion zu implementieren, wie folgt -

this._http.post(`${apiEndPoint}`,{'newDocument':formData,'documentMetaData':value} , options).map(res => res.json()).catch(error => Observable.throw(error)).subscribe(
       data => console.log('success'), 
       error => console.log(error)) 

und dann modifizierte ich die Server-seitige Methode wie folgt -

[System.Web.Http.HttpPost] 
public string addUpdateDocument(HttpPostedFileBase newDocument, BlankFormsModels documentMetaData) 

Wo BlankFormsModels nur eine Klasse. Wenn ich dies tue, werden die Meta-Daten auf der Serverseite empfangen, aber die Datei wird nicht empfangen. Es kommt als null. Bitte schlagen Sie vor, wie POST Daten und JSON-Daten in derselben Anfrage bilden kann.

Answer 1

Sie können Daten wie folgt an:

var obj = { 
    formData : formData, 
    otherInfo : otherInfo 
} 

Und auf Server-Seite, während Datei hochzuladen, verwenden Sie den Schlüssel formData von obj statt gesamte Objekt. Und danach posten weitere Daten. Verwenden Sie Versprechen für die ordnungsgemäße Synchronisierung.