AngularJS потерял данные из директивы multipartForm для маршрутов

Question

Я пытаюсь создать загрузчик файлов Excel и проанализировать данные в маршрутах, чтобы сохранить его, но кажется, что данные теряются при переводе из FormData, отправленного через маршрут службы $ http , Я понятия не имею, что делать! Если у вас есть опыт, пожалуйста, помогите!

Html Вид:

<form ng-controller="myCtrl"> 
     <div class="form-group"> 
      <label for="name">Name</label> 
      <input type="text" class="form-control" ng-model="myFile.name"> 
     </div> 
     <div class="form-group" > 
      <input type="file" file-model="myFile.file"/> 
     </div> 
     <button ng-click="Submit()">upload me</button> 
    </form> 

контроллер Вид:

myApp.controller('myCtrl', ['$scope', 'multipartForm', function($scope, multipartForm){ 
    $scope.myFile = {}; 
    $scope.Submit = function(){ 
     var uploadUrl = '/upload'; 
     multipartForm.post(uploadUrl, $scope.myFile); 
    } 
}]); 

Сервис Вид:

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]); 
     } 
     $http.post(uploadUrl, fd, { 
      transformRequest: angular.indentity, 
      headers: { 'Content-Type': undefined } 
     }); 
    } 
}]) 

Директива Вид:

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

Это маршрут, по которому данные не проходят.

module.exports = function (app) { 
    app 
    .post('/upload', function(req, res){ 
     console.log(req.body); 
     console.log(req.files); 
    }); 
} 

Server.js

var express = require('express'); 
var bodyParser = require('body-parser'); 
var multer = require('multer'); 
var upload = multer({ dest: './uploads/'}); 
var app = express(); 





// if using body-parser 
app.use(bodyParser.json()); 
app.use(express.static(__dirname + '/client')); 
app.use('/node_modules', express.static(__dirname + '/node_modules')); 
// if mongoose, require mongoose 
//require('./server/config/mongoose.js'); 

//routes 
require('./server/config/routes.js')(app); 

app.listen(8000, function() { 
    console.log('listening on port 8000'); 
}) 

Answer 1

простой способ заключается в использовании нг-файл-загрузки. это самая популярная директива AngularJS для загрузки файлов с использованием HTML5 с PolyPill FileAPI для неподдерживаемых браузеров.

Docs

Demo