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

我已经使用MEAN堆栈语言创build了一个简单的login和注册。 我有一个configuration文件页面，用户可以编辑他的信息，如姓名，地址等，我可以存储和检索inputtypes的“文本”字段。 我如何添加图片上传function并检索上传的图片？ 林新意味着堆栈，所以任何人都可以请帮助我？ 谢谢。

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

和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

要构build图片上传function，您需要向前端和后端添加function。

您需要在“服务器”中的“angularjs”和“某种types的上传处理程序”包中具有自定义图像上传指令或组件。

记住这一切，谷歌一定会带领您为您提供最好的套餐。

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

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

有相当数量的图书馆可用。