使用 AngularJS 发送数据的 Multipart/form-data 表单答案

【问题标题】：Multipart/form-data form sending data with AngularJS使用 AngularJS 发送数据的 Multipart/form-data 表单
【发布时间】：2016-01-01 06:12:03
【问题描述】：

我需要将以下表单数据发布到作为 webapi 的 URL 并且方法是 post

var surveyData = {
            Name: xyz,
            SetReminder: 'false',
            NoOfReminder: '0',
            StartDate: 'xyz',
            EndDate: 'xyz',
            Language: 'eng-us',
            Duration: '1',
            ApplicationName: 'xyz',
            SurveyTypeName: 'zxy'
        };

我编写了下面的代码，它调用了 wbeapi 的 post 方法，但该函数能够发送数据，但 post 方法无法读取使用 angular js 发送的数据。

function(surveyData) {
               return $http.post(URL , surveyData,{
                    headers: { 'Content-Type': 'multipart/form-data' }
                });

【问题讨论】：

我认为这个问题的第一个答案就是你所寻求的答案：stackoverflow.com/questions/24710503/…
链接中给出的代码不起作用

标签： javascript jquery angularjs angularjs-scope

【解决方案1】：

使用：

var data = HttpContext.Current.Request.Form["surveyData"];

从您的多部分表单中接收 json 数据。

如果您的多部分表单包含文件，那么要获取这些文件，请使用：

System.Web.HttpFileCollection postedfiles = System.Web.HttpContext.Current.Request.Files;

另外请记住，不要在控制器操作方法中使用任何参数。

确保导入这些命名空间：

using System.Net.Http;
using System.Web;
using System.Web.Http;

编辑：

修改你的 javascript 代码。

var data = new FormData();
data.append("surveyData", angular.toJson(surveyData));

如果你想添加图片/其他，你可以使用代码添加那些以下。

//data.append("uploadedFile", $scope.files[0]);

所以你的代码将是：

function(surveyData) {
               return $http.post(URL , data,{
                    headers: { 'Content-Type': 'multipart/form-data' }
                });

现在您将能够使用接收 json 数据

var data = HttpContext.Current.Request.Form["surveyData"];

和图像/其他文件（如果有的话）使用

System.Web.HttpFileCollection postedfiles = System.Web.HttpContext.Current.Request.Files;

【讨论】：

当我使用 var data = HttpContext.Current.Request.Form["surveyData"];

【解决方案2】：

如果 web api 是 Multipart/form-data 那么您需要在下面的表单中创建键值对，以便创建多部分表单数据。

var objFormData = new FormData();
                for (var key in surveyData)
                    objFormData.append(key, surveyData[key]);

那么您需要使用以下代码发送创建的多部分表单数据：

 return $http.post(URL, objFormData, {
                    transformRequest: angular.identity,
                    headers: { 'Content-Type': undefined }
                });

【讨论】：