如何在 $http.post 上附加文件？ [复制]

Question

我在 Angular.js 的 FormData 上有一些问题

我的代码是这样的：

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() {
       });
    }
 }])

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

}]);

当我执行 $http.post 时，fd.append 上的 fd 是空的，我不知道为什么会发生这种情况。在 fd 上会有一个类似 arq.xls 的文件。

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

app.post('/send/sendPlanilha', function(req, res, next){}

所以，我的问题是，为什么 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 的 base64 编码增加了 33% 的额外开销。然后后端需要对base64数据进行解码。