使用角度js發佈FormData文件以及模型數據

Question

我使用輸入類型文件和其他用戶數據一起上傳圖像。我的模型由用戶類：

public class User 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
    public int Rollno { get; set; } 
    public byte[] ProfileImage { get; set; } 
    public HttpPostedFile image { get; set; } 
} 

和在asp.net mvc的一個發佈方法：

public ActionResult AddUser(User user) 
{ 
    var files = Request.Files; 
    foreach (string fileName in Request.Files) 
    { 
     HttpPostedFileBase file = Request.Files[fileName]; 
     byte[] uploadFile = new byte[file.InputStream.Length]; 

    } 
    return View(); 
} 

我有一個輸入標籤是這樣的：

<input id="imgInp" type="file" aria-label="Add photos to your post" class="upload" name="file" onchange="angular.element(this).scope().LoadFileData(this.files)" multiple="" accept="image/*"> 

和angularJS這樣的控制器：

angular.module('app', ['AngularDemo.BeerController']). 
    controller('formController',['$scope','$http', function ($scope,$http) { 
    alert('in controller'); 
    var formData = new FormData(); 

    $scope.LoadFileData = function (files) { 
     for (var file in files) { 
      formData.append("file", files[file]); 
     } 
    }; 

    $scope.submit = function() { 

     alert('in submit'); 
     $http.post("/Home/AddUser", formData, { 
      withCredentials: true, 
      headers: { 'Content-Type': undefined }, 
      transformRequest: angular.identity 
     }).success(function (response) { 

     }); 
    } 
}]); 

我的圖像文件回傳到AddUser方法中，但是如何發送模型數據？我在表格中添加了ng-model="Name"等。如何將$scope.Name等與該圖像數據一起發送，因爲我的$http.post將表單數據視爲傳遞數據？

Answer 1

我弄明白了。返回缺少

.controller（ '的FormController'，[ '$範圍'， '$ HTTP'，函數（$範圍，$ HTTP）{$ scope.user = { ID：0， 名稱： 「」 }; $ scope.files = [];

$scope.LoadFileData = function(files) { 
    $scope.files = files; 
}; 

$scope.submit = function() { 
    $http({ 
     url: "/Home/AddUser", 
     method: "POST", 
     headers: { "Content-Type": undefined }, 
     transformRequest: function(data) { 
      var formData = new FormData(); 
      formData.append("user", angular.toJson(data.user)); 
      for (var i = 0; i < data.files.length; i++) { 
       formData.append("files[" + i + "]", data.files[i]); 
      } 
      *return formData;*//NOTICE THIS RETURN WHICH WAS MISSING 
     }, 
     data: { user: $scope.user, files: $scope.files } 
    }) 
    .success(function(response) { }); 
}; 

}）;

Answer 2

如果您將用戶作爲JSON字符串傳遞，則可以使其工作。但是，這不會綁定User類的圖像屬性。

[HttpPost] 
public ActionResult AddUser(string user, HttpPostedFileBase[] files) 
{ 
    // parse user into User 
} 

表單域

<input id="imgInp" type="file" aria-label="Add photos to your post" class="upload" name="file" 
     onchange="angular.element(this).scope().LoadFileData(this.files)" multiple="" accept="image/*"> 
<input name="Id" type="text" ng-model="user.Id" /> 
<input name="Name" type="text" ng-model="user.Name" /> 

和角控制器

.controller('formController',['$scope','$http', function ($scope, $http) { 
    $scope.user = { 
     Id: 0, 
     Name: "" 
    }; 
    $scope.files = []; 

    $scope.LoadFileData = function(files) { 
     $scope.files = files; 
    }; 

    $scope.submit = function() { 
     $http({ 
      url: "/Home/AddUser", 
      method: "POST", 
      headers: { "Content-Type": undefined }, 
      transformRequest: function(data) { 
       var formData = new FormData(); 
       formData.append("user", angular.toJson(data.user)); 
       for (var i = 0; i < data.files.length; i++) { 
        formData.append("files[" + i + "]", data.files[i]); 
       } 
      }, 
      data: { user: $scope.user, files: $scope.files } 
     }) 
     .success(function(response) { }); 
    }; 
}); 

如果你不想來解析JSON來User那麼你就必須編寫自定義的粘合劑。如果沒有很多用戶字段，則可以將它們作爲離散參數傳遞。

public ActionResult AddUser(string userName, int userId, HttpPostedFileBase[] files) { ... }