AngularJS从多部分形式指令到路由丢失了数据
AngularJS lost data from multipartForm directive to routes
我正在尝试构建一个 Excel 文件上传器并解析路由中的数据以存储它,但似乎数据在通过$http服务路由发送的 FormData 的转换中丢失了。我不知道该怎么办!如果您有任何经验,请提供帮助!
网页视图:
<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);
});
}
服务器.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 指令,用于使用 HTML5 和 FileAPI polyfill 上传文件,适用于不受支持的浏览器。
文档
演示
相关文章:
- Angular JS和Node路由/布线-仅在页面刷新后显示数据
- 使用iron路由器服务器路由中的数据渲染模板
- Angular2路由-将数据从父组件传递到子组件
- Hapi-js重定向到另一个带有额外请求数据的路由
- 在Node.js中将数据传递到子路由时出现问题
- 在Emberjs中设置从路由到控制器的数据错误
- 如何通过Websockets路由不同的数据类型
- 数据切换=“;下拉菜单”;激活路由重定向,而不是yeoman中的下拉菜单
- 使用路由的解析数据进行角度注入
- 在路由 angularjs/expressjs 之间传递数据
- AngularJS ui-router:如何全局解析所有路由的典型数据
- Ember JS - 从路由操作更新/刷新模型数据
- 重新解析角度路由数据并保持数据同步
- meteorjs:简单的可重用模板,使用Iron Router具有特定于路由的数据上下文
- 角度 UI 路由器 - 使用路由传递动态数据
- AngularJS:在模板外部获取路由解析数据
- 如何在刷新时将持久数据保存在角度路由服务中
- Angular 2 RC Final——从service动态加载路由数据
- 铁路由器:在路由器功能中访问路由数据
- 我需要路由数据在客户端之间的节点客户端正确连接的用户