Question

我使用MEAN堆栈语言创建了一个简单的登录和注册。我有一个个人资料页面，用户可以在其中编辑他的信息，如姓名，地址等。我能够存储和检索输入类型＆＃34; text＆＃34;领域。如何添加图片上传功能并检索上传的图片？我是新手意味着堆栈所以有人可以帮助我吗？感谢。

我的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 Server中使用某种类型的上传处理程序包。

牢记这一切，Google肯定会引导您找到最适合您的套餐。

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

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

有大量的库可供使用。

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

1 个答案: