使用角度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) { ... }