Angular 2フォームデータとJSONデータが同じリクエストで投稿されます

Question

Angular 2とHTMLファイルアップロードコントロールを使用してファイルのアップロード操作を行っています。 次のようにファイルをアップロードするための私のコードがある -

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

次のように私はASP.Net MVC、サーバ側のメソッドを持っている -

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

    } 

これは、限り、私はアップロードしていますと正常に動作していますファイル。しかし、私はファイルから離れていくつかの情報を送付したいと思います。

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

と以下のようにIは、サーバ側のメソッドを修飾 - - 私は次のように機能を実現しようとした

BlankFormsModelsは単なるクラスである

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

。これを行うと、メタデータはサーバー側で受信されますが、ファイルは受信されません。それはnullとして来る。 POSTフォームデータとJSONデータを同じリクエストでどのようにすることができるかをお勧めします。

Answer 1

あなたは、このようにデータを送信することができます。ファイルのアップロード中に全体ではなく、オブジェクトのobjのキーformDataを使用し、

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

とサーバ側で。その後、別のデータを投稿します。 適切な同期のために約束を使用してください。