Nodejs 实现图片上传
Nodejs 实现图片上传
刚刚学nodejs，做了个图片上传。略简陋，但是没关系复杂的功能都是从简单的开始的嘛 我用的是express的框架使用的view engine是ejs。因为比较简单代码量也不会很多，所以我还是把代码全部贴出来吧。我在社区里面看的很多资料都是没有贴出很多代码，这样像我这样的还是大学生的初学者实在有些蛋疼。先声明，这篇介绍只适合刚刚学习nodejs的童鞋，大神请无视。 这是app.js文件 `var express = require(‘express’) , routes = require(’./routes’) , http = require(‘http’) , flash = require(‘connect-flash’) , path = require(‘path’);
var app = express();
app.configure(function(){ app.set(‘port’, process.env.PORT || 3000); app.set(‘views’, __dirname + ‘/views’); app.set(‘view engine’, ‘ejs’); app.use(express.favicon()); app.use(flash()); app.use(express.logger(‘dev’)); app.use(express.methodOverride()); //这里上传的文件目录存放的是临时文件，如果需要保存需要重新移动到一个新的文件下 app.use(express.bodyParser({uploadDir:’./uploads’})); app.use(express.cookieParser()); //想要在应用中使用session一定要加上这句话，secret的内容应该是随意的 //并且app.configure的配置的加载顺序也是有关系的。。。加载顺序出错了也会出现不可预知的问题 app.use(express.session({secret:‘poynt’})); app.use(app.router); app.use(express.static(path.join(__dirname, ‘public’))); });
app.configure(‘development’, function(){ app.use(express.errorHandler()); });
routes(app); http.createServer(app).listen(app.get(‘port’), function(){ console.log("Express server listening on port " + app.get(‘port’)); });`
在view模板中就写了提交一个表单，此处省去 这是route的index.js文件
// 文件操作的模板 var fs = require(‘fs’);
module.exports = function(app){ app.get(’/’,function(req,res){
res.render('index',{
'title': '文件上传'
});
});
app.get(’/file-upload’, function(req,res) {
res.render(‘upload’,{
user: req.session.user,
src: req.flash(‘path’)
});
});
app.post(’/file-upload’, function(req,res) {
currentUser = {
username : req.body[‘username’],
password : req.body[‘password’]
};
//之前我没有写req.session.user,也就是说没有设定session是会报错的。
//flash要在session环境中才能用
var tmpPath = req.files.thumbnail.path;
//移动到指定的目录，一般放到public的images文件下面
//在移动的时候确定路径已经存在，否则会报错
var targetPath = ‘public/images/’ + req.files.thumbnail.name;
console.log(targetPath);
//将上传的临时文件移动到指定的目录下
fs.rename(tmpPath, targetPath , function(err) {
if(err){
throw err;
}
//删除临时文件
fs.unlink(tmpPath, function(){
if(err) {
throw err;
}
//将当前的用户写到会话中
req.session.user = currentUser;
req.flash(‘path’, targetPath);
res.redirect(’/file-upload’);
})
})
});
}
下面是展示页面
<!DOCTYPE html> <html> <head> <title>显示图片</title> <link rel=‘stylesheet’ href=’/stylesheets/style.css’ /> </head> <body> <img src=“images/china.jpg” alt=""> </body> </html>
我感觉代码比较简单，跟Java EE的文件上传相比实在是简单多了。 如果有什么更好的实现方法或是哪里有错的地方还请各位指教。
当然可以！以下是关于如何使用 Node.js 和 Express 框架来实现图片上传的详细步骤和示例代码。我们将使用 multer 这个中间件来处理文件上传。
步骤 1: 安装必要的依赖
首先，你需要安装一些必要的库。打开终端并运行以下命令：
npm install express multer ejs connect-flash
步骤 2: 创建 app.js 文件
app.js 是应用程序的主要入口点。我们将在这里设置 Express 应用程序，并配置路由和其他中间件。
const express = require('express');
const multer = require('multer');
const flash = require('connect-flash');
const path = require('path');
const app = express();
// 设置视图引擎为 EJS
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// 配置 Multer 用于处理文件上传
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads');
},
filename: function (req, file, cb) {
cb(null, Date.now() + '-' + file.originalname);
}
});
const upload = multer({ storage: storage });
// 配置中间件
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));
app.use(flash());
// 设置 session
app.use(express.session({ secret: 'poynt' }));
// 设置错误处理器（仅在开发模式下）
if (process.env.NODE_ENV === 'development') {
app.use(express.errorHandler());
}
// 路由配置
const indexRouter = require('./routes/index')(upload);
app.use('/', indexRouter);
// 启动服务器
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
步骤 3: 创建路由文件 index.js
接下来，我们创建一个路由文件 index.js 来处理不同的请求。
const express = require('express');
const multer = require('multer');
const flash = require('connect-flash');
const router = express.Router();
router.get('/', (req, res) => {
res.render('index', { title: '图片上传' });
});
router.get('/file-upload', (req, res) => {
res.render('upload', { user: req.session.user, src: req.flash('path') });
});
router.post('/file-upload', multer({ dest: './uploads' }).single('thumbnail'), (req, res) => {
const currentUser = {
username: req.body.username,
password: req.body.password
};
const tmpPath = req.file.path;
const targetPath = path.join(__dirname, '../public/images/', req.file.filename);
// 将上传的临时文件移动到指定的目录下
require('fs').rename(tmpPath, targetPath, (err) => {
if (err) throw err;
// 删除临时文件
require('fs').unlink(tmpPath, (err) => {
if (err) throw err;
// 将当前的用户写到会话中
req.session.user = currentUser;
req.flash('path', `/images/${req.file.filename}`);
res.redirect('/file-upload');
});
});
});
module.exports = (upload) => {
return (app) => {
app.use('/', upload.any(), router);
};
};
步骤 4: 创建视图文件 index.ejs 和 upload.ejs
最后，我们需要创建两个视图文件来显示表单和上传后的结果。
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>图片上传</title>
</head>
<body>
<h1>上传图片</h1>
<form action="/file-upload" method="POST" enctype="multipart/form-data">
<input type="text" name="username" placeholder="用户名" required>
<input type="password" name="password" placeholder="密码" required>
<input type="file" name="thumbnail" required>
<button type="submit">上传</button>
</form>
</body>
</html>
upload.ejs
<!DOCTYPE html>
<html>
<head>
<title>显示图片</title>
</head>
<body>
<h1>图片已上传</h1>
<% if (src) { %>
<img src="<%= src %>" alt="">
<% } else { %>
<p>尚未上传图片</p>
<% } %>
<a href="/">返回上传页面</a>
</body>
</html>
总结
以上就是使用 Node.js 和 Express 实现图片上传的基本步骤。通过这些代码，你可以轻松地创建一个简单的图片上传功能。如果你有任何问题或建议，请随时提出！
为了实现图片上传功能，你需要使用 multer 这样的中间件来处理文件上传。以下是如何在 Node.js 中使用 Express 和 EJS 来实现图片上传的基本示例。
1. 安装依赖
首先，确保安装了必要的依赖：
npm install express ejs multer
2. 修改 app.js
var express = require('express');
var multer = require('multer');
var routes = require('./routes');
var http = require('http');
var flash = require('connect-flash');
var path = require('path');
var app = express();
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(flash());
app.use(express.logger('dev'));
app.use(express.methodOverride());
app.use(express.cookieParser());
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads'); // 指定上传文件的目录
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname)); // 使用时间戳生成文件名
}
});
var upload = multer({ storage: storage });
app.use(upload.any()); // 允许任何类型的文件上传
app.use(express.session({ secret: 'poynt' }));
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.configure('development', function () {
app.use(express.errorHandler());
});
routes(app);
http.createServer(app).listen(app.get('port'), function () {
console.log("Express server listening on port " + app.get('port'));
});
3. 修改路由 routes/index.js
var fs = require('fs');
module.exports = function (app) {
app.get('/', function (req, res) {
res.render('index', {
'title': '文件上传'
});
});
app.get('/file-upload', function (req, res) {
res.render('upload', {
user: req.session.user,
src: req.flash('path')
});
});
app.post('/file-upload', upload.single('thumbnail'), function (req, res) {
var currentUser = {
username: req.body.username,
password: req.body.password
};
var targetPath = 'public/images/' + req.file.filename;
fs.rename(req.file.path, targetPath, function (err) {
if (err) throw err;
fs.unlink(req.file.path, function (err) {
if (err) throw err;
req.session.user = currentUser;
req.flash('path', targetPath);
res.redirect('/file-upload');
});
});
});
};
4. 创建视图文件 views/upload.ejs
<!DOCTYPE html>
<html>
<head>
<title>上传图片</title>
</head>
<body>
<h1>上传图片</h1>
<form action="/file-upload" method="POST" enctype="multipart/form-data">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="file" name="thumbnail">
<button type="submit">上传</button>
</form>
<% if (src) { %>
<img src="<%= src %>" alt="上传的图片">
<% } %>
</body>
</html>
总结
以上代码展示了如何在 Node.js 中使用 Express 和 EJS 来实现基本的图片上传功能。通过 Multer 中间件处理文件上传，并将其保存到指定目录。希望这对你有所帮助！如果你有任何问题或需要进一步的改进，请随时告诉我。
