无法循环遍历字符串数组并附加到 FormData

Question

我正在 AngularJS 中开发一个文件上传模块。我将拥有多个文件控件，每个控件一次可以上传一个文件（不是多个）。最后点击提交，我保存了所有文件。我正在使用ng-repeat 动态生成文件控件，如下所示。

 <div class="upload-button" ng-repeat="fileInput in fileInputs">
                <div class="upload-button-icon">
                    <img src="images/folder-small.png">
                    <div class="upload-text">{{fileInput}}</div>
                    <input type="file" file-data="{{fileInput}}" file-model="{{fileInput}}" />
                </div>
            </div>

为文件控件赋值的JS代码

$scope.fileInputs = ["Passport","Visa"];

下面是我上传文件的代码。

myapp.factory('fileUpload', ['$http', function ($http) {
    var fileuploadurl = "http://localhost:19144/" + 'api/Customer/UploadLeaseFiles/' + 2;
    var service = {
        uploadUrl: fileuploadurl,
        pendingFiles: [],
        doUpload: doUpload
    };
    return service;
    function doUpload() {
        debugger;
        var files = new FormData();
        angular.forEach(this.pendingFiles, function (value, index) {
            files.append('file', value);
            files.append('IndexValue', index);

        });
        return $http.post(this.uploadUrl, files, {
            transformRequest: angular.identity,
            headers: {
                'Content-Type': undefined
            }
        })
    }
}]);

这是我的指令代码。

myapp.directive('fileModel', ['fileUpload', function (fileUpload) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind("change", function (evt) {
                fileUpload.pendingFiles[attrs.fileModel] = evt.target.files[0];
            });
        }
    };
}]);

仅当我将整数分配给 fileInputs 时，上述代码才有效：

$scope.fileInputs = [1,2,3];

如果我将整数分配给文件输入，我很难理解为什么它会起作用。如何分配字符串并使上述代码工作？

Answer 1

您正在将文件推送到数组中。基本上你正在做类似的事情：

pendingFiles[1] = file

再一次

pendingFiles["passport"] = file

第一种情况适用于数组，但第二种情况不行。

因此解决方案是将待处理文件更改为如下对象：

var service = {
        uploadUrl: fileuploadurl,
        pendingFiles: {},
        doUpload: doUpload
    };

使用对象，您可以在其上创建属性，例如：

{
passport : file,
Visa : file2
}

然后在上传时使用此对象。

更新

为了发送额外的数据，使用 formData obj 的 data 属性。喜欢：

 var files = new FormData();
        angular.forEach(this.pendingFiles, function (value, index) {
            files.append('file', value);
            files.append('IndexValue', index);
            files.append ('data', angular.toJson(anyJSObject));

        });

希望它有效。