將數據和文件從Angular發送到Web API

Question

嘗試將一些數據和附件（文件）從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>

Answer 1

WebApi（當前）不使用與MVC和HttpPostedFileBase相同的機制。 請參閱此問題答案作為處理文件上傳的示例-以下是示例（從答案簡化）：

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實現來處理此問題。