AngularからWeb APIへのデータとファイルの送信

Question

AngularJS ClientからMVC Web APIへの添付ファイル（ファイル）を送信しようとしましたが、動作しません：添付ファイル以外のすべてのフィールドが表示されますヌルとしてここ

は、モデルの：

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ビューです：

WEBAPIは（現時点では） HttpPostedFileBaseとMVCと同じメカニズムを使用していません

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

Answer 1

。この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という独自の実装をロールバックする必要があります。