Javascript 文件上载不工作意味着堆栈

我是MEAN开发的初学者，尝试使用它实现CRUD应用程序。最初，我使用MEAN成功地完成了我的CRUD应用程序。现在我尝试使用angular.js上传文件。我知道Angular.js不支持文件上传功能，所以通过使用和 我正在尝试实现这个特性

但不知何故，代码不起作用，并且在firebug控制台上出现了一些angular.js错误

错误：[$injector:unpr]http://errors.angularjs.org/1.5.0/$injector/unpr？p0=multipartFormProvider%20%3C-%20multipartForm%20%3C-%20AppCtrl…依此类推

以下是我的代码：

app/public/controller.js

var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', 'multipartForm', function ($scope, $http, multipartForm) {
        console.log("Hello World from controller");


        $scope.contact = {};

        var refresh = function () {
            $http.get('/contactlist').success(function (response) {
                console.log("I got the data that I requested");
                $scope.contactlist = response; // This will put data into our html file
                $scope.contact = "";
            });
        };

        refresh();

        $scope.addContact = function () {
            console.log($scope.contact);
            var uploadUrl = '/upload';            
            multipartForm.post('/contactlist', uploadUrl, $scope.contact).success(function (response) {
                console.log(response);
                refresh();
            });
        };

        $scope.remove = function (id) {
            console.log(id);
            $http.delete('/contactlist/' + id).success(function (response) {
                refresh();
            });
        };

        $scope.edit = function (id) {
            console.log(id);
            $http.get('/contactlist/' + id).success(function (response) {
                $scope.contact = response;
            });
        };

        $scope.update = function () {
            console.log($scope.contact._id);
            //$scope.contact means sending all form data to server
            $http.put('/contactlist/' + $scope.contact._id, $scope.contact).success(function (response) {
                refresh();
            });
        };

        $scope.deselect = function () {
            $scope.contact = "";
        };

    }]);

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

    };
}]);

var express = require('express');
var app = express(); // using this we can use commands, function of express in this (server.js) file
var mongojs = require('mongojs');
var db = mongojs('contactlist', ['contactlist']); // Means which mongodb database & collection we are going to use
var bodyParser = require('body-parser');
var multer = require('multer');

// To test whether server is running correctly
/* app.get("/", function(req, res){
 res.send("Hello world from server.js");
 }); */

app.use(express.static(__dirname + "/public")); // express.static means we are telling the server to look for static file i.e. html,css,js etc.
app.use(multer({dest: './uploads/'}).single('photo'));
app.use(bodyParser.json()); // To parse the body that we received from input


//This tells the server to listen for the get request for created contactlist throughout
app.get('/contactlist', function (req, res) {

    console.log("I received a GET request");

     //Creating an array of above data
     var contactlist = [person1, person2, person3];
     // its going to respond to the GET request by sending back contactlist data in JSON format which controller can use
     res.json(contactlist);


    db.contactlist.find(function (err, docs) {
        console.log(docs);
        res.json(docs);
    });

});

// listens for the POST request from the controller
app.post('/contactlist', function (req, res) {
    console.log(req.body);
    db.contactlist.insert(req.body, function (err, doc) {
        res.json(doc);
    });
});

app.delete('/contactlist/:id', function (req, res) {
    var id = req.params.id; // to get the value of id from url
    console.log(id);
    db.contactlist.remove({_id: mongojs.ObjectId(id)}, function (err, doc) {
        res.json(doc);
    });
});

app.get('/contactlist/:id', function (req, res) {
    var id = req.params.id;
    console.log(id);
    db.contactlist.findOne({_id: mongojs.ObjectId(id)}, function (err, doc) {
        res.json(doc);
    });
});

app.put('/contactlist/:id', function (req, res) {
    var id = req.params.id;
    console.log(req.body.name);
    db.contactlist.findAndModify({
        query: {_id: mongojs.ObjectId(id)},
        update: {$set: {
                name: req.body.name,
                email: req.body.email,
                number: req.body.number,
                country: req.body.country,
                gender: req.body.gender,
                education: req.body.education
            }}, new : true}, function (err, doc) {
        res.json(doc);
    });
});

app.listen(3000);
console.log("Server running on port 3000");

app/public/index.html

<html ng-app="myApp">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <title>Contact List App</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>


        <div class="container" ng-controller="AppCtrl">
            <div class="panel panel-default">
                <div class="panel-heading"><h4 class="panel-title">Details</h4></div>
                <div class="panel-body">

                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" placeholder="Name" ng-model="contact.name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" ng-model="contact.email">
                    </div>
                    <div class="form-group">
                        <label for="Contact">Contact</label>
                        <input class="form-control" placeholder="Contact" ng-model="contact.number">
                    </div>

                    <div class="form-group">
                        <label for="country">Country</label>
                        <select class="form-control" ng-model="contact.country">
                            <option value="">Select</option>
                            <option value="India">India</option>
                            <option value="Australia">Australia</option>
                            <option value="Germany">Germany</option>
                            <option value="Spain">Spain</option>
                            <option value="Japan">Japan</option>
                            <option value="Switzerland">Switzerland</option>
                            <option value="USA">USA</option>
                            <option value="Sri Lanka">Sri Lanka</option>
                            <option value="South Africa">South Africa</option>
                            <option value="England">England</option>
                            <option value="New Zealand">New Zealand</option>                                
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="gender">Gender</label>
                        <div class="radio">
                            <label>
                                <input type="radio" name="gender" id="optionsRadios1" value="Male" ng-model="contact.gender">
                                Male
                            </label>
                            &nbsp;&nbsp;
                            <label>
                                <input type="radio" name="gender" id="optionsRadios2" value="Female" ng-model="contact.gender">
                                Female
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="education">Education</label>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="education" ng-model="contact.education.MCA">
                                MCA
                            </label>
                            &nbsp;&nbsp;
                            <label>
                                <input type="checkbox" name="education" ng-model="contact.education.BE">
                                BE
                            </label>
                            &nbsp;&nbsp;
                            <label>
                                <input type="checkbox" name="education" ng-model="contact.education.ME">
                                ME
                            </label>
                            &nbsp;&nbsp;
                            <label>
                                <input type="checkbox" name="education" ng-model="contact.education.BCA">
                                BCA
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Avatar</label>
                        <input type="file" file-model="contact.file">                        
                    </div>

                    <div class="well well-lg text-center bg-gray">
                        <button class="btn btn-primary" ng-click="addContact()">Add Contact</button>
                        &nbsp;&nbsp;
                        <button class="btn btn-info" ng-click="update()">Update</button>
                        &nbsp;&nbsp;
                        <button class="btn btn-info" ng-click="deselect()">Clear</button>
                    </div>

                </div>

                <h4>Listing</h4>
                <input type="text" class="form-control" ng-model="contact.names" placeholder="Instant result search">
                <table class="table table-bordered">
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Number</th>
                        <th>Country</th>
                        <th>Gender</th>
                        <th>Education</th>
                    </tr>
                    <tr ng-repeat="contact in contactlist| filter:contact.names|orderBy:-1">
                        <td>{{contact.name}}</td>
                        <td>{{contact.email}}</td>
                        <td>{{contact.number}}</td>
                        <td>{{contact.country}}</td>
                        <td>{{contact.gender}}</td>
                        <td>
                            {{contact.education}}
                        </td>
                        <td>
                            <button class="btn btn-danger" ng-click="remove(contact._id)">Remove</button>
                            &nbsp;&nbsp;
                            <button class="btn btn-warning" ng-click="edit(contact._id)">Edit</button>
                        </td>
                    </tr>
                </table>
            </div>



            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
            <script src="controllers/controller.js"></script>
            <script src="services/multipartForm.js"></script>
            <script src="directives/fileModel.js"></script>

    </body>
</html>

最后在Node/Express端：app/server.js

var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', 'multipartForm', function ($scope, $http, multipartForm) {
        console.log("Hello World from controller");


        $scope.contact = {};

        var refresh = function () {
            $http.get('/contactlist').success(function (response) {
                console.log("I got the data that I requested");
                $scope.contactlist = response; // This will put data into our html file
                $scope.contact = "";
            });
        };

        refresh();

        $scope.addContact = function () {
            console.log($scope.contact);
            var uploadUrl = '/upload';            
            multipartForm.post('/contactlist', uploadUrl, $scope.contact).success(function (response) {
                console.log(response);
                refresh();
            });
        };

        $scope.remove = function (id) {
            console.log(id);
            $http.delete('/contactlist/' + id).success(function (response) {
                refresh();
            });
        };

        $scope.edit = function (id) {
            console.log(id);
            $http.get('/contactlist/' + id).success(function (response) {
                $scope.contact = response;
            });
        };

        $scope.update = function () {
            console.log($scope.contact._id);
            //$scope.contact means sending all form data to server
            $http.put('/contactlist/' + $scope.contact._id, $scope.contact).success(function (response) {
                refresh();
            });
        };

        $scope.deselect = function () {
            $scope.contact = "";
        };

    }]);

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

    };
}]);

var express = require('express');
var app = express(); // using this we can use commands, function of express in this (server.js) file
var mongojs = require('mongojs');
var db = mongojs('contactlist', ['contactlist']); // Means which mongodb database & collection we are going to use
var bodyParser = require('body-parser');
var multer = require('multer');

// To test whether server is running correctly
/* app.get("/", function(req, res){
 res.send("Hello world from server.js");
 }); */

app.use(express.static(__dirname + "/public")); // express.static means we are telling the server to look for static file i.e. html,css,js etc.
app.use(multer({dest: './uploads/'}).single('photo'));
app.use(bodyParser.json()); // To parse the body that we received from input


//This tells the server to listen for the get request for created contactlist throughout
app.get('/contactlist', function (req, res) {

    console.log("I received a GET request");

     //Creating an array of above data
     var contactlist = [person1, person2, person3];
     // its going to respond to the GET request by sending back contactlist data in JSON format which controller can use
     res.json(contactlist);


    db.contactlist.find(function (err, docs) {
        console.log(docs);
        res.json(docs);
    });

});

// listens for the POST request from the controller
app.post('/contactlist', function (req, res) {
    console.log(req.body);
    db.contactlist.insert(req.body, function (err, doc) {
        res.json(doc);
    });
});

app.delete('/contactlist/:id', function (req, res) {
    var id = req.params.id; // to get the value of id from url
    console.log(id);
    db.contactlist.remove({_id: mongojs.ObjectId(id)}, function (err, doc) {
        res.json(doc);
    });
});

app.get('/contactlist/:id', function (req, res) {
    var id = req.params.id;
    console.log(id);
    db.contactlist.findOne({_id: mongojs.ObjectId(id)}, function (err, doc) {
        res.json(doc);
    });
});

app.put('/contactlist/:id', function (req, res) {
    var id = req.params.id;
    console.log(req.body.name);
    db.contactlist.findAndModify({
        query: {_id: mongojs.ObjectId(id)},
        update: {$set: {
                name: req.body.name,
                email: req.body.email,
                number: req.body.number,
                country: req.body.country,
                gender: req.body.gender,
                education: req.body.education
            }}, new : true}, function (err, doc) {
        res.json(doc);
    });
});

app.listen(3000);
console.log("Server running on port 3000");

---

任何帮助都将不胜感激：）

这很难说，因为似乎存在问题的服务是

multipartForm.js

，但您将index.html复制到了应该复制的位置。我假设这只是你文章中的一个输入错误，但是你有

index.html

在

controllers/controller.js

中查找脚本，但是你在顶部列出了controller.js，名为

app/public/controller.js

@bennettaddams:对不起。。愚蠢的错误。我修改了帖子。请检查抱歉，没有什么真正让我吃惊的，除了您为post函数提供了三个参数，而它需要两个参数（应该是.post（'/contactlist'+uploadUrl，$scope.contact）…）。你能详细说明你所犯的错误吗？