AngularJS将数据从multipartForm指令丢失到路由
我正在尝试构build一个Excelfile upload器，并parsingpath中的数据来存储它，但是在通过$ http服务路由发送的FormData中，数据会丢失。 我不知道该怎么做！ 如果您有任何经验，请帮忙！
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'); })
简单的方法是使用ng-file-upload。 这是最受欢迎的AngularJS指令，用于使用带有FileAPI polyfill的HTML5进行file upload，用于不受支持的浏览器。
文件
演示