javascript - AngularJS 丢失了从 multipartForm 指令到路由的数据

Question

我正在尝试构建一个 Excel 文件 uploader 并解析路由中的数据来存储它，但似乎数据在通过 $http 服务路由发送的 FormData 的转换过程中丢失了。我不知道该怎么办!如果您有这方面的经验，请帮忙!

HTML View :

    <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>

Controller View :

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

服务 View :

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

指令 View :

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

这是数据不经过的路线 View 。

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

Answer 1

最简单的方法是使用 ng-file-upload。它是最流行的 AngularJS 指令，用于使用 HTML5 和 FileAPI polyfill 进行文件上传，适用于不支持的浏览器。

Docs

Demo