Question

我在Angular.js的FormData上有问题

我的代码是这样的：

HOST bastion
Hostname ec2-example-ip.compute-1.amazonaws.com
User ec2-user
IdentityFile /Users/myname/Downloads/BastionKey.pem

HOST *.ec2.internal
User ec2-user
IdentityFile /Users/myname/Downloads/Ec2/Ec2.pem
ProxyCommand ssh -q -W %h:%p bastion

angular
.module("appFoco", [])
.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}])
.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file) {
       var fd = new FormData();
       fd.append('file', file);


       $http.post('/send/sendPlanilha', fd, {
          transformRequest: angular.identity,
          headers: {'Content-Type': undefined}
       })
       .success(function() {
       })
       .error(function() {
       });
    }
 }])

当我执行$ http.post时，fd.append上的fd为空，并且我不知道为什么会这样。在fd上将有一个类似于arq.xls的文件。

我已经看过许多教程，但没有找到解决方案。后端代码在NodeJs中，因此我需要在fd.append上获取一个文件，并发送到$ http.post以获取Nodejs上的另一个功能，该功能如下：

.controller("LoginFormPDF",['$scope','fileUpload', function($scope,fileUpload){

    $scope.sendPlanilha = function(){            
        console.log($scope.email, $scope.nome);
        var file = $scope.myFile;
        console.dir(file);

        $scope.usuario = {"usuarioEmail" : $scope.email, "usuarioNome" : $scope.nome}

        fileUpload.uploadFileToUrl(file);
    }

}]);

所以，我的问题是，为什么fd.append上的fd为空？以及我该如何解决？

Answer 1

直接发送file更有效：

app.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file) {
       ̶v̶a̶r̶ ̶f̶d̶ ̶=̶ ̶n̶e̶w̶ ̶F̶o̶r̶m̶D̶a̶t̶a̶(̶)̶;̶
       ̶f̶d̶.̶a̶p̶p̶e̶n̶d̶(̶'̶f̶i̶l̶e̶'̶,̶ ̶f̶i̶l̶e̶)̶;̶

       ̶$̶h̶t̶t̶p̶.̶p̶o̶s̶t̶(̶'̶/̶s̶e̶n̶d̶/̶s̶e̶n̶d̶P̶l̶a̶n̶i̶l̶h̶a̶'̶,̶ ̶f̶d̶,̶ ̶{̶
       return $http.post('/send/sendPlanilha', file, {
          transformRequest: angular.identity,
          headers: {'Content-Type': undefined}
       })
    }
}])

Content-Type: multipart/form-data的{{3}}编码增加了33％的额外开销。然后后端需要解码base64数据。

如何在$ http.post上附加文件？

1 个答案: