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.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

通过使用console.log（）检查FormData对象filesformdata中的数据。它在那里，你只是看不到它。但是，您可以在请求有效负载下的网络选项卡中查看它。

Answer 2

这是一个filesInput指令，它与ngModelController API：

集成在一起

app.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: postLink
  };
  function postLink(scope, elem, attrs, ngModel) {
    elem.on("change", function() {
      ngModel.$setViewValue(elem[0].files);
    })
  }
});

用法：

<input type=file ng-model="files" files-input multiple />

用以下方法测试：

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

  }

您会发现formData.append有效。

DEMO on PLNKR

Angularjs formData.append不起作用

2 个答案: