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

嘗試從AngularJS客戶端向MVC Web API發送一些數據&附件（文件），但它不起作用：除了附加文件外，我可以看到所有字段爲空將數據和文件從Angular發送到Web API

這裏的型號：

class Model{ 
... //the fields 

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

這裏的網絡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>

來源

2016-09-09 J.Doe

@ J.Doe..in your modal where you pass the Photo property？ – MukulSharma

您需要服務器端的CustomMEdiaTypeFormatter。看到我的答案在這裏 - http://stackoverflow.com/questions/38537484/post-image-to-asp-net-api-2-and-angular-2/38539120#38539120。 –

我不認爲這是關於服務器端。客戶端顯示json對文件沒有任何效果，儘管轉換爲json之前的對象包含一些數據 –

的WebAPI不（目前）使用相同的機制爲MVC與HttpPostedFileBase。看到此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來處理這個問題。

來源

2016-09-12 10:52:08

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

回答

相關問題