使用multer上载文件时出错

Question

我正在尝试创建一个WebApp，用户可以从个人资料页面上传他的个人资料照片。我正在使用MEAN Stack并使用multer上传文件。

以下是 CLIENT VIEW

的代码

 <div class="col-xs-8 vn-right-pane">
        <h1>Profile</h1>
        <form class="form-horizontal" enctype="multipart/form-data">
            <div class="form-group">

        <label for="first">First Name</label>
        <div class="input-group">
        <span class="input-group-addon">
                    <i class="glyphicon glyphicon-option-horizontal"></i>
                </span>
            <input ng-model="model.navigatedUser.firstName"
                   id="first"
                   class="form-control"
                   type="text"
                   placeholder="First Name"/>
        </div>


        <label for="last">Last Name</label>
                <div class="input-group">
        <span class="input-group-addon">
                    <i class="glyphicon glyphicon-option-horizontal"></i>
                </span>
        <input ng-model="model.navigatedUser.lastName"
               id="last"
               class="form-control"
               type="text"
               placeholder="Last Name"/>
                </div>

        <label for="email">Email</label>
                <div class="input-group">
        <span class="input-group-addon">
                    <i class="glyphicon glyphicon-envelope"></i>
                </span>
        <input ng-model="model.navigatedUser.email"
               id="email"
               class="form-control"
               type="email"
               placeholder="Email"/>
                </div>

        <label>Username</label>
                <div class="input-group">
        <span class="input-group-addon">
                    <i class="glyphicon glyphicon-user"></i>
                </span>
        <input ng-model="model.navigatedUser.username"
               class="form-control"
               type="text"
               placeholder="Username"/>
                </div>

                <label>Profile Image</label>
                <div class="input-group">
        <span class="input-group-addon">
                    <i class="glyphicon glyphicon-upload"></i>
                </span>
                    <input name='myFile'
                           type='file'
                           class="form-control">
                </div>

        <label>Phone Number</label>
                <div class="input-group">
        <span class="input-group-addon">
                    <i class="glyphicon glyphicon-phone"></i>
                </span>
        <input ng-model="model.navigatedUser.phone"
               class="form-control"
               type="text"
               placeholder="Phone Number"/>
                </div>





        <a ng-click="model.deleteUser(model.navigatedUser)"
           class="btn btn-warning btn-block">
            Unregister
        </a>

        <a ng-click="model.updateUser(model.navigatedUser)"
           class="btn btn-primary btn-block">
            Update
        </a>
                <a type="submit"
                   ng-click="model.uploadImage(model.navigatedUser)"
                   class="btn btn-primary btn-block">
                    Upload
                </a>

        <a ng-click="model.logout()"
           class="btn btn-danger btn-block">
            Logout
        </a>
            </div>
        </form>

        <div class="alert alert-danger" ng-show="model.error">
            {{model.error}}
        </div>

        <div class="alert alert-success" ng-show="model.message">
            {{model.message}}
        </div>

    </div>

以下是控制器中的uploadImage函数代码：

        function uploadImage(user) {
        UserService
            .uploadImage(vm.navigateUserId, user)
            .then(function (response) {
                if (response.data) {
                    $route.reload();
                }
                else {
                    alert("Error updating user information!")
                }
            });
    }

以下是来自 SERVICE.CLIENT 的客户端服务请求。这使用UserService

 function uploadImage(userId, user) {
        return $http.post("/api/project/upload/"+ userId, user);
    }

最后，下面是我上传Image的服务器端代码。在 SERVICE.SERVER

中

 var multer = require('multer');
var upload = multer({ dest: __dirname+'/../../public/uploads' });

    app.post("/api/project/upload/:id",upload.single('myFile'),uploadImage);

    function uploadImage(req, res) {
    var myFile        = req.file;
    var userId        = req.params.id;
    var originalname  = myFile.originalname; // file name on user's computer
    var filename      = myFile.filename;     // new file name in upload folder
    var path          = myFile.path;         // full path of uploaded file
    var destination   = myFile.destination;  // folder where file is saved to
    var size          = myFile.size;
    var mimetype      = myFile.mimetype;
    projectUserModel
        .findUserById(userId)
        .then(function (userData) {
            userData.imgUrl = '/uploads/'+filename;
            userData.save();
            var callbackUrl="/project/#/user/"+userId;
            res.redirect(callbackUrl);
        },function (error) {
            res.sendStatus(404);
            return;
        });
}

从逻辑上讲，我觉得我的方法是正确的，但我无法让它发挥作用。 我总是在uploadImage函数中为myFile定义未定义。它无法从req.file获取文件;

请帮帮我，我被困在这个很长一段时间了。提前谢谢。