javascript - Angularjs formData.append 不工作

Question

您好，我正在开发 angularjs 应用程序。我有文件上传模块。我正在将文件数据附加到 FormData，如下所示。

 var filesformdata = new FormData();
    angular.forEach(this.pendingFiles, function (value, key) {
                filesformdata.append(key, value);
            });
            for (var pair of filesformdata.entries()) {
                console.log(pair[0] + ', ' + pair[1]);
            }

这是我的 Angular 代码。

angular.module('RoslpApp').factory('fileUpload', ['$http', function ($http) {
    debugger;
    var fileuploadurl = "http://localhost:19144/" + 'api/Customer/UploadLeaseFiles/' + 2;
    var service = {
        uploadUrl: fileuploadurl,
        pendingFiles: [],
        doUpload: doUpload
    };
    return service;


    function doUpload() {
        debugger;
        var filesformdata = new FormData();
        angular.forEach(this.pendingFiles, function (value, key) {
            filesformdata.append(key, value);
        });
        for (var pair of filesformdata.entries()) {
            console.log(pair[0] + ', ' + pair[1]);
        }

        return $http.post(this.uploadUrl, filesformdata, {
            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];
            });
        }
    };
}]);

这是上传功能

  $scope.upload = function (filename) {
                debugger;
                fileUpload.doUpload().success(function (success) {
                   console.log(success);
                });
            };

这是html代码。

<div class="upload-button" ng-repeat="file in files">
                <div class="upload-button-icon">
                    <img src="images/folder-small.png">
                    <div class="upload-text">{{file}}</div>
                    <input type="file" id="file1" name="file1" file-data="{{file}}" file-model="{{file}}"/>
                </div>
            </div>
   <input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="upload()">

尽管我在 this.pendingFiles 中有文件，但当我使用 console.log 或在 api 中使用以下代码显示时，我没有得到文件。

  System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
                // CHECK THE FILE COUNT.
                UploadedLeaseFiles totalDocumentInserted = null;
                for (int iCnt = 0; iCnt <= hfc.Count - 1; iCnt++)

我在 this.pendingFiles 中有文件。请看屏幕截图。

我的 filesformdata FormData 总是空的。我可以在这里得到一些帮助来解决这个问题吗？谢谢。

Answer 1

FormData 对象文件 formdata 中的数据不会通过使用 console.log() 检查它来显示。它就在那里，只是你看不见。但是，您可以在请求负载下的网络选项卡中查看它。