将数据和文件从 Angular 发送到 Web API答案

【问题标题】：Sending data & file from Angular to Web API将数据和文件从 Angular 发送到 Web API
【发布时间】：2017-01-17 00:56:48
【问题描述】：

尝试将一些数据和附件（文件）从 AngularJS 客户端发送到 MVC Web API，但它不起作用：我可以看到除附件之外的所有字段，显示为 null

这是模型：

class Model{
 ... //the fields

public HttpPostedFileBase Photo { get; set; }//Attachment file, represented as an image
}

这是 Web API：

public IHttpActionResult CreateModel([FromBody]Model model)
{
...
}

这是 AngularJS 代码：

(function () {
angular.module("application")
       .controller("homeCtrl", ["$scope", "entityService",
           function ($scope, entityService) {

               $scope.createModel = function (model)
               {
                   entityService.createModel(model)
                                .then(function (data) {
                                    console.log(data);
                                });
               };

               $scope.model = {
                   FirstName: "John",
                   LastName: "Doe"                 
               };

           }]);
})();


"use strict";
(function () {
 angular.module("application")
       .factory("entityService", ["akFileUploaderService", function (akFileUploaderService) {
           var createModel = function (model) {
               return akFileUploaderService.saveModel(model, "/api/CreateModel");
           };
           return {
               createModel: createModel
           };
       }]);
})();


(function () {
"use strict"
angular.module("akFileUploader", [])
    .factory("akFileUploaderService", ["$q", "$http",
           function ($q, $http) {

               var saveModel = function (data, url) {
                   var deferred = $q.defer();

                   $http({
                       url: url,
                       method: "POST",
                       data: JSON.stringify(data),   
                       transformRequest: angular.identity,
                       headers: { 'Content-Type': "application/json" }  
                   }).success(function (result) {
                       deferred.resolve(result);
                   }).error(function (result, status) {
                       deferred.reject(status);
                   });
                   return deferred.promise;
               };

               return {
                   saveModel: saveModel
               }

           }])
    .directive("akFileModel", ["$parse",
            function ($parse) {
                return {
                    restrict: "A",
                    link: function (scope, element, attrs) {
                        var model = $parse(attrs.akFileModel);
                        var modelSetter = model.assign;
                        element.bind("change", function () {
                            scope.$apply(function () {
                                modelSetter(scope, element[0].files[0]);
                            });
                        });
                    }
                };
            }]);
})(window, document);

这是 HTML 视图：

....
<div class="form-group">
        <label for="attachment">Photo:</label>
        <div class="col-md-10">
            <input type="file" name="attachment" class="form-control" data-ak-file-model="model.Photo" />
        </div>
    </div>


    <button type="button" ng-disabled="newForm.$invalid" ng-click="createModel(model)" class="btn btn-primary">
        Create
    </button>

【问题讨论】：

@J.Doe..在您传递 Photo 属性的模式中？
您需要在服务器端使用 CustomMEdiaTypeFormatter。在这里查看我的答案 - stackoverflow.com/questions/38537484/… 。
我认为这与服务器端无关。客户端显示json没有任何文件，虽然转换为json之前的对象包含一些数据
@MukuiSharma：照片是模型的属性

标签： angularjs asp.net-mvc asp.net-web-api single-page-application

【解决方案1】：

WebApi 不（当前）使用与带有HttpPostedFileBase 的 MVC 相同的机制。请参阅此 question answer 作为处理文件上传的示例 - 下面是一个示例（从答案中简化）：

public async Task<HttpResponseMessage> AddFile()
{
    string root = HttpContext.Current.Server.MapPath("~/temp/uploads");
    var provider = new MultipartFormDataStreamProvider(root);
    var result = await Request.Content.ReadAsMultipartAsync(provider);

    foreach (var key in provider.FormData.AllKeys)
    {
        foreach (var val in provider.FormData.GetValues(key))
        {
            if (key == "aFormValue")
            {
                // do something with form data value
            }
        }
    }

    return this.Request.CreateResponse(HttpStatusCode.OK);
}

简而言之，您必须阅读请求的内容，从中挑选出文件（有时是表单）部分。您可以使用HttpContent 上的内置MultipartFormDataStreamProvider 类和ReadAsMultipartAsync 方法来执行此操作。

上面的方法假设你想保存到磁盘，当你想把文件放在其他地方时，它变得有点棘手，你必须滚动你自己的MultipartFormDataStreamProvider 实现来处理这个。

【讨论】：