Angularjs上传多个文件答案

【问题标题】：Angularjs uploading multiple filesAngularjs上传多个文件
【发布时间】：2020-04-24 10:49:33
【问题描述】：

我们的团队正在 ServiceNow 中进行开发，需要能够上传文档并将其附加到案例记录中。在浏览了几个示例之后，我们有一个工作示例。我们的 HTML 如下所示：

<input type="file" file-model="myFile"/>
<button ng-click="uploadFile()">upload me</button>

在我们的控制器中，我们有以下内容：

$scope.uploadFile = function(){
        var file = $scope.myFile;
        console.log('file is ' );
        console.dir(file);
        var uploadUrl = "/fileUpload";
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };

我们还创建了一个名为 fileUpload 的依赖项：

var myApp = angular.module('myApp', []);

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
            .success(function(){
        })
            .error(function(){
        });
    };
}]);

最后，我们有一个名为 fileModel 的 Angular 提供程序：

function fileModel($parse) {
    return { 
        restrict: 'A', 
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel); 
            var modelSetter = model.assign;
            element.bind('change', function(){ 
                scope.$apply(function(){
                  modelSetter(scope, element[0].files[0]);
                }); 
            }); 
        } 
    }; 
}

有没有办法修改它，以便我们可以上传多个文件而不是一个？我们在 HTML 中添加了“多个”，但我们的控制台中只显示了 1 个文件。我认为我们遗漏了一些非常明显的东西，但似乎无法弄清楚......

【问题讨论】：

标签： angularjs file-upload servicenow

【解决方案1】：

试试这个代码并检查控制台。

<body ng-app="fileUpload" ng-controller="MyCtrl">
<input type="file" multiple="true" id="fileUpload" file="file"/>
<button ng-click="uploadFile()">upload me</button>
</body>

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
     $scope.uploadFile = function () {

        var fd = new FormData();
        angular.forEach($scope.file, function (value, key) {
            fd.append(key, value);
        });

         for (var pair of fd.entries()) {
            console.log(pair[0]+ ', ' + pair[1]); 
        }
        console.log("hi")
    };
}]);

app.directive('file', function () {
    return {
        scope: {
            file: '='
        },
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var file = event.target.files;
                scope.file = file ? file : undefined;
                scope.$apply();
            });
        }
    };
})

Codepen - https://jsfiddle.net/PratikPatel227/0rehq8g4/1/（其他）

【讨论】：

【解决方案2】：

你添加了吗 multiple="true" 在你的 HTML 中？

【讨论】：