Post FormData 文件和使用 angular js 的模型数据

Question

我正在使用输入类型文件和其他用户数据上传图像。我的模型由用户 class:

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" 等。自从我的 $http.post 将表单数据作为传递数据以来，我如何发送 $scope.Name 等与该图像数据？

Answer 1

如果将 User 作为 JSON 字符串传递，则可以使它起作用。但是，这不会绑定 User class 的图像属性。

[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" />

和 Angular 控制器

.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) { ... }

Answer 2

我解决了这个问题。 return 丢失了

.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]);
            }
            *return formData;*//NOTICE THIS RETURN WHICH WAS MISSING
        },
        data: { user: $scope.user, files: $scope.files }
    })
    .success(function(response) {   });
};
});

Post FormData 文件和使用 angular js 的模型数据

Post FormData file along with model data using angular js

javascript

asp.net-mvc

file-upload

angularjs