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

然后我修改了服务器端方法如下 -

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

其中 BlankFormsModels 只是一个类。当我这样做时，服务器端收到元数据，但未收到文件。它为空。请建议如何在同一请求中 POST 表单数据和 JSON 数据。

Answer 1

您可以像这样发送数据：

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

在服务器端，上传文件时，使用 的密钥而formData不是obj整个对象。之后发布另一个数据。使用 Promise 来实现正确的同步。