數據不在角度和節點js中的多部分表單數據中發佈（使用角度和節點js上傳文件）

Question

我更加喜歡使用Angular js和節點js。我正在通過角和節點js進行文件上傳過程。我已經通過觀看一些教程來創建指令和服務。但是在服務中，表單數據不會在NodeJs服務器上發佈。這裏由文件下面的代碼文件： -

這裏是我的指令： -

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

下面是服務文件代碼： -

myApp.service('multipartForm', ['$http', function($http){ 
    this.post = function(uploadUrl, data){ 
     var fd = new FormData(); 
     for(var key in data) 
      fd.append(key,data[key]); 

     console.log(fd); 
     $http({ 
      url: uploadUrl, 
      method: 'POST', 
      headers: { 'Content-Type': undefined }, 
      transformRequest: angular.identity, 
      data: JSON.stringify(fd) 
     }). 
     success(function(data) { 
      console.log('success'); 
     }). 
     error(function(data, response) { 
      console.log(response + " " + data); 
     }); 
    }; 
}]); 

這是我定義的所有方法我angularjs代碼： -

var myApp = angular.module('myApp', []); 

    myApp.controller('saveJsonDemo',['$http','$scope','multipartForm',function($http,$scope,multipartForm){ 

     $scope.formData = {}; 
     $scope.saveJson = function() { 
     var uploadUrl = '/savedata'; 
     console.log($scope.formData); 
     multipartForm.post(uploadUrl, $scope.formData); 
    }; 

    }]); 

當我通過此服務發佈數據到節點js服務器，並且我console.log req。 body和rex.files變成空白。我的代碼中的問題在哪裏。這是我的js節點服務器文件（app.js）

var express = require('express'); 
var app = express(); 
var bodyParser = require('body-parser'); 
var path = require('path'); 
var http = require('http'); 
var fs = require('fs'); 
var multer = require('multer'); 
var done  =  false; 

// all environments 
app.use(multer({dest: './uploads/'})); 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'ejs'); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.set('port', process.env.PORT || 3000); 

app.use(function(err, req, res, next){ 
    app.use(bodyParser.urlencoded({extended: true})); 
    app.use(bodyParser.json({limit: '50mb'})); 
    console.log(err); 
}); 

app.post('/savedata', function(req,res){ 
    console.log('Here'); 
    console.log(req.body); 
    var currentTime = Date.now(); 
    /*fs.writeFile('./json/'+currentTime+'.json', JSON.stringify(req.body), function (err) { 
     if (err) return console.log(err); 
     else res.send(); 
    }); */ 
}); 


http.createServer(app).listen(app.get('port'), function(){ 
    console.log('Express server listening on port ' + app.get('port')); 
}); 

在以上/ SAVEDATA方法REQ來了空白。我的代碼中的錯誤在哪裏。

Answer 1

http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js「>

<div ng-controller = "myCtrl"> 
    <input type = "file" file-model = "myFile"/> 
    <button ng-click = "uploadFile()">upload me</button> 
    </div> 

    <script> 
    var myApp = angular.module('myApp', []); 

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

    myApp.service('fileUpload', ['$http', function ($http) { 
     this.uploadFileToUrl = function(file, uploadUrl){ 
      var fd = new FormData(); 
      fd.append('file', file); 

      $http.post(uploadUrl, fd, { 
       transformRequest: angular.identity, 
       headers: {'Content-Type': undefined} 
      }) 

      .success(function(){ 
      }) 

      .error(function(){ 
      }); 
     } 
    }]); 

    myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){ 
     $scope.uploadFile = function(){ 
      var file = $scope.myFile; 

      console.log('file is '); 
      console.dir(file); 

      var uploadUrl = "/fileUpload"; 
      fileUpload.uploadFileToUrl(file, uploadUrl); 
     }; 
    }]); 

    </script> 

只需複製粘貼並更改你的API角度服務調用所需的url路徑，然後它將工作:)