gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 00:34:03 25 4
gpt4 key购买 nike

我使用 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);
});
}
}

})();

用于将数据更新到数据库的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();
});
}

最佳答案

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

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

牢记所有这些,Google 一定会引导您找到适合您的最佳套餐。

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

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

有大量可用的库。

关于angularjs - 使用 Node Express 4 MongoDB 上传和检索图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39888902/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com