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

    }

只要我只上传文件，这个工作正常。但我想发送除File之外的更多信息。我尝试按如下方式实现该功能 -

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只是一个类。当我这样做时，在服务器端接收元数据，但不接收文件。它是null。请建议如何在同一请求中POST表单数据和JSON数据。

Answer 1

您可以发送以下数据：

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

在服务器端，在上传文件时，请使用formData的键obj而不是整个对象。然后发布另一个数据。使用promises进行适当的同步。

Angular 2表单数据和JSON数据在同一请求中发布

1 个答案: