使用 Node Express 4 MongoDB 上传和检索图像

Question

I have created a simple login and signup using MEAN stack languages. I have a profile page where user can edit his info like name, address, etc. I am able to store and retrieve input type "text" fields. How can i add image upload feature and retrieve uploaded images? Im new to mean stack so can anyone please help me? Thanks.

My server.js is this

require('rootpath')();
var express = require('express');
var app = express();
var session = require('express-session');
var bodyParser = require('body-parser');
var expressJwt = require('express-jwt');
var config = require('config.json');

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(session({ secret: config.secret, resave: false, saveUninitialized: true }));

// use JWT auth to secure the api
app.use('/api', expressJwt({ secret: config.secret }).unless({ path: ['/api/users/authenticate', '/api/users/register'] }));

// routes
app.use('/login', require('./controllers/login.controller'));
app.use('/register', require('./controllers/register.controller'));
app.use('/app', require('./controllers/app.controller'));
app.use('/api/users', require('./controllers/api/users.controller'));


// make '/app' default route
app.get('/', function (req, res) {
    return res.redirect('/app');
});

// start server
var server = app.listen(3000, function () {
    console.log('Server listening at http://' + server.address().address + ':' + server.address().port);
});

HTML to save and view saved data looks like this

    <h1>My Account</h1>
    <div class="form-container">
        <form method="post" >
            <div class="form-group">
                <label for="firstName">First name</label>
                <input type="text" id="firstName" class="form-control" ng-model="vm.user.firstName" required />
            </div>
            <div class="form-group">
                <label for="lastName">Last name</label>
                <input type="text" id="lastName" class="form-control" ng-model="vm.user.lastName" required />
            </div>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" class="form-control" ng-model="vm.user.username" required />
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" class="form-control" ng-model="vm.user.password" />
            </div>
            <div class="form-group">
                <label for="address">Address</label>
                <input type="text" id="password" class="form-control" ng-model="vm.user.address" />
            </div>  
            <div class="form-group">
                <button class="btn btn-primary" ng-click="vm.saveUser()">Save</button>
                <button class="btn btn-danger" ng-click="vm.deleteUser()">Delete</button>
            </div>
        </form>
    </div>
<!-- View Data -->
    <div class="col-md-12">
        <h1>Hi {{vm.user.firstName}}!!</h1>
        <p><strong>User Name :</strong> {{vm.user.username}} </p>
        <p><strong>Full Name : </strong> {{vm.user.firstName}} {{ vm.user.lastName}}</p>
        <p><strong> Your address is : </strong> {{vm.user.address}}</p>
    </div>

and app.js looks like this

(function () {
    'use strict';

    angular
        .module('app')
        .controller('Account.IndexController', Controller);

    function Controller($window, UserService, FlashService) {
        var vm = this;

        vm.user = null;
        vm.saveUser = saveUser;
        vm.deleteUser = deleteUser;

        initController();

        function initController() {
            // get current user
            UserService.GetCurrent().then(function (user) {
                vm.user = user;
            });
        }

        function saveUser() {
            UserService.Update(vm.user)
                .then(function () {
                    FlashService.Success('User updated');
                })
                .catch(function (error) {
                    FlashService.Error(error);
                });
        }

        function deleteUser() {
            UserService.Delete(vm.user._id)
                .then(function () {
                    // log user out
                    $window.location = '/login';
                })
                .catch(function (error) {
                    FlashService.Error(error);
                });
        }
    }

})();

and user.service.js which is used to update data to db is

function updateUser() {
    // fields to update
    var set = {
        firstName: userParam.firstName,
        lastName: userParam.lastName,
        username: userParam.username,
        address: userParam.address,
    };

    // update password if it was entered
    if (userParam.password) {
        set.hash = bcrypt.hashSync(userParam.password, 10);
    }

    db.users.update(
        { _id: mongo.helper.toObjectID(_id) },
        { $set: set },
        function (err, doc) {
            if (err) deferred.reject(err.name + ': ' + err.message);

            deferred.resolve();
        });
}

Answer 1

To build the image upload feature, You need to add functionality to both the frontend and backend.

You need to have a custom image upload directive or component in the angularjs and Some kind of upload handler package in the Express Server as well.

Keeping all this in mind, Google will surely lead you to best package available for you.

One code sample can be found here : https://gist.github.com/keithics/bf0e13feaee5631fa936b7b203029cd4

Other: https://github.com/nervgh/angular-file-upload

There are huge number of libraries available for the same.