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

Question

我使用 MEAN 堆栈语言创建了一个简单的登录和注册。我有一个个人资料页面，用户可以在其中编辑他的姓名、地址等信息。我可以存储和检索输入类型的“文本”字段。如何添加图片上传功能并检索上传的图片？我是新手，所以有人可以帮我吗？谢谢。

我的 server.js 是这个

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 如下所示

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

app.js 看起来像这样

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

})();

而用于将数据更新到db的user.service.js是

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

要构建图像上传功能，您需要向前端和后端添加功能。

您需要在 angularjs 中有一个自定义图像上传指令或组件，并且在 Express 服务器中还需要某种上传处理程序包。

牢记这一切，Google 一定会引导您找到最适合您的软件包。

一个代码示例可以在这里找到：https://gist.github.com/keithics/bf0e13feaee5631fa936b7b203029cd4

其他：https://github.com/nervgh/angular-file-upload

有大量可用的库。