无法遍历字符串数组并追加到FormData [英] Unable to loop through string array and append to FormData

问题描述

我正在AngularJS中开发文件上传模块.我将有多个文件控件，每个控件一次只能上传一个文件(不能多个).最后，单击提交"后，我将保存所有文件.我正在使用 ng-repeat 动态生成文件控件，如下所示.

I am developing a file upload module in AngularJS. I will be having multiple file controls and each control can upload one file at a time (not multiple). Finally on click of submit I am saving all the files. I am dynamically generating file controls using ng-repeat as below.

 <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代码

JS code to assign values to file controls

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

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

Below is my code to upload files.

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时，以上代码才有效:

Above code will work only if I assign integers to fileInputs as:

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

如果要为文件输入分配整数，我将努力理解为什么它可以正常工作.如何分配字符串并使上面的代码起作用?

I am struggling to understand why it is working if I assign integer to fileinputs. How can I assign strings and make the above code work?

推荐答案

您正在将文件推送到数组中.基本上，您正在执行以下操作:

You are pushing files in an array. Basically you are doing something like:

pendingFiles[1] = file

再次

pendingFiles["passport"] = file

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

The first case works fine with array, but the second won't.

因此解决方案是将待处理文件更改为类似以下对象的对象:

So the solution is change pending files to an object like:

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

使用对象，您可以在其上设置属性，例如:

With object you can make properties on it like:

{
passport : file,
Visa : file2
}

，然后在上传时使用此对象.

and then use this object while you upload.

更新

要发送额外的数据，请使用formData obj的data属性.喜欢:

for sending extra data use data property of formData obj. Like:

 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！