AngularJS从多部分形式指令到路由丢失了数据

AngularJS lost data from multipartForm directive to routes

本文关键字:路由 数据 指令 多部 分形 AngularJS      更新时间:2023-09-26

我正在尝试构建一个 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 上传文件,适用于不受支持的浏览器。

文档

演示