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];

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

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));

        });

希望它有效。

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

1 个答案: