使用 AngularJS 和 Asp.Net MVC 使用 FormData 上传多个文件

Question

我想使用 angular js 上传多个文件，为此我使用 FormData() 。

这是我的表单字段

    <input name="profileImage" type="file" class="upload"
    onchange="angular.element(this).scope().LoadFileData(this.files)" accept="image/*">

 <input name="avatarImage" type="file" class="upload"
    onchange="angular.element(this).scope().LoadFileData(this.files)" accept="image/*">

    <input name="Id" type="text" ng-model="user.Id" />
<input name="Name" type="text" ng-model="user.Name" />

这是我的 Asp.Net MVC 控制器

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

和 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]);
                }
               return formData;

            },
            data: { user: $scope.user, files: $scope.files }
        })
        .success(function(response) {   });
    };
});

问题是我想上传多张图片，一张用于个人资料，另一张用于头像。当我上传两个时，只有第二个显示覆盖前一个。我试图推送 $scope.files.push(files) 但它提供了 null.Need 帮助我在那里缺少的东西。

Answer 1

更改LoadFileData函数

$scope.LoadFileData = function (files) {
        $scope.files.push(files[0]);
    };

files returns 文件列表对象和实际文件对象位于索引 0。

使用 AngularJS 和 Asp.Net MVC 使用 FormData 上传多个文件

Upload multiple files with FormData using AngularJS and Asp.Net MVC

asp.net

asp.net-mvc

input-type-file

asp.net-mvc-4

angularjs