Node / Express文件上传 [英] Node/Express file upload
本文介绍了Node / Express文件上传的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！DOCTYPE html>
< html>
< head>
< title> {{title}}< / title>
< link rel ='stylesheet'href ='/ stylesheets / style.css'/>
< / head>
< body>
< h1> {{title}}< / h1>
< p>欢迎来到{{title}}< / p>
< form method ='post'action ='upload'enctype =multipart / form-data>
< input type ='file'name ='fileUploaded'>
< input type ='submit'>
< / form>
< / body>
< / html>
这是我的路线
var express = require（'express'）;
var router = express.Router（）;
/ * GET主页。 * /
router.get（'/'，function（req，res）{
res.render（'index'，{title：'Express'}）;
}）;
router.post（'/ upload'，function（req，res）{
console.log（req.files）;
}）;
module.exports = router;
这里是我的app.js
var express = require（'express'）;
var path = require（'path'）;
var favicon = require（'static-favicon'）;
var logger = require（'morgan'）;
var cookieParser = require（'cookie-parser'）;
var bodyParser = require（'body-parser'）;
var routes = require（'./ routes / index'）;
var users = require（'./ routes / users'）;
var app = express（）;
//查看引擎设置
app.set（'views'，path.join（__ dirname，'views'））;
app.set（'view engine'，'hjs'）;
app.use（favicon（））;
app.use（logger（'dev'））;
app.use（bodyParser.json（））;
app.use（bodyParser.urlencoded（））;
app.use（cookieParser（））;
app.use（express.static（path.join（__ dirname，'public'）））;
app.use（'/'，routes）;
app.use（'/ users'，users）;
/// catch 404并转发到错误处理程序
app.use（function（req，res，next）{
var err = new Error（'Not Found'） ;
err.status = 404;
next（err）;
}）;
///错误处理程序
//开发错误处理程序
//将打印stacktrace
if（app.get（'env'）= =='development'）{
app.use（function（err，req，res，next）{
res.status（err.status || 500）;
res.render 'error'，{
message：err.message，
error：err
}）;
}）;
}
//生产错误处理程序
//没有堆栈跟踪泄漏给用户
app.use（function（err，req，res，next）{
res.status（err.status || 500）;
res.render（'error'，{
message：err.message，
error：{}
} ）;
}）;
module.exports = app;
我看到包含 methodOverride（）和 bodyParser（{keepExtensions：true，uploadDir：path}）应该是有帮助的，但如果我添加了这些行，我甚至不能启动我的服务器。
解决方案
ExpressJS问题：
大多数中间件从快递4.
退房： http://www.github.com/senchalabs/connect#middleware
对于像busboy这样的多部分中间件，busboy连接，强大的流程，需要分开。
此示例使用 connect-busboy 中间件
创建/ img和/ public文件夹。
使用文件夹结构：
\server.js
\img\其中的东西上传到
\public\index.html
SERVER.JS
var express = require（'express ）; // Express Web Server
var busboy = require（'connect-busboy'）; //中间件用于表单/文件上传
var path = require（'path'）; //用于文件路径
var fs = require（'fs-extra'）; //文件系统 - 用于文件操作
var app = express（）;
app.use（busboy（））;
app.use（express.static（path.join（__ dirname，'public'）））;
/ * ====================================
创建一个路由（/ upload）来处理表单提交
（处理POST请求/上传）
Express v4路线定义
==================================== $（$ / $）
.post（function（req，res，next）{$
req.busboy.on（'file'，function（fieldname，file，filename）{
console.log（上传：+ filename）;
//图像上传的路径
fstream = fs.createWriteStream（__ dirname +'/ img /'+ filename）;
file.pipe（fstream）;
fstream.on（'close'，function（）{
console.log（Upload Finished of+ filename）;
res.redirect （'back'）; // where to go next
}）;
}）;
}）;
var server = app.listen（3030，function（）{
console.log（'Listening on port％d'，server.address（）。port）;
}）;
INDEX.HTML
<！DOCTYPE html>
< html lang =enng-app =APP>
< head>
< meta charset =UTF-8>
< title>角文件上传< / title>
< / head>
< body>
< form method ='post'action ='upload'enctype =multipart / form-data>
< input type ='file'name ='fileUploaded'>
< input type ='submit'>
< / body>
< / html>
以下内容将与强大的
SERVER.JS / p>
var express = require（'express'）; // Express Web Server
var bodyParser = require（'body-parser'）; // connect bodyParsing middleware
var formidable = require（'formidable'）;
var path = require（'path'）; //用于文件路径
var fs = require（'fs-extra'）; //文件系统 - 重命名文件需要
var app = express（）;
app.use（express.static（path.join（__ dirname，'public'）））;
/ * ==================================== ==================
bodyParser（）需要允许Express查看上传的文件
============ / / / / / / / / / / / / / / / / / /
app.use（bodyParser（{defer：true}））;
app.route（'/ upload'）
.post（function（req，res，next）{
var form = new formidable.IncomingForm（）;
//默认上传到操作系统tmp dir
form.uploadDir =./img; //设置上传目录
form.keepExtensions = true; //保留文件扩展名
form.parse（req，function（err，fields，files）{
res.writeHead（200，{'content-type'：'text / plain'}）;
res。 write（'received upload：\\\
\\\
'）;
console.log（form.bytesReceived）;
// TESTING
console.log（file size： + JSON.stringify（files.fileUploaded.size））;
console.log（file path：+ JSON.stringify（files.fileUploaded.path））;
console.log（文件名（file.fileUploaded.type）;
console.log（ astModifiedDate：+ JSON.stringify（files.fileUploaded.lastMo difiedDate））;
//强制更改上传文件的名称
//将文件重命名为其原始名称
fs.rename（files.fileUploaded.path， ./img/'+files.fileUploaded.name，function（err）{
if（err）
throw err;
console.log（'renamed complete'）;
}）;
res.end（）;
}）;
}）;
var server = app.listen（3030，function（）{
console.log（'Listening on port％d'，server.address（）。port）;
}）;
I'm using node v0.10.26 and express v4.2.0 and I'm pretty new to node. I've been beating my head against my desk for the past three or so hours trying to get a file upload form working with node. At this point I'm just trying to get req.files to not return undefined. My view looks like this
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>{{ title }}</h1>
<p>Welcome to {{ title }}</p>
<form method='post' action='upload' enctype="multipart/form-data">
<input type='file' name='fileUploaded'>
<input type='submit'>
</form>
</body>
</html>
Here are my routes
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
router.post('/upload', function(req, res){
console.log(req.files);
});
module.exports = router;
And here's my app.js
var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
/// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
I saw somewhere that including methodOverride() and bodyParser({keepExtensions:true,uploadDir:path}) was supposed to help but I can't even launch my server if I add those lines.
解决方案
ExpressJS Issue:
Most of the middleware is removed from express 4. check out: http://www.github.com/senchalabs/connect#middleware For multipart middleware like busboy, busboy-connect, formidable, flow, parted is needed.
This example works using connect-busboy middleware.
create /img and /public folders.
Use the folder structure:
\server.js
\img\"where stuff is uploaded to"
\public\index.html
SERVER.JS
var express = require('express'); //Express Web Server
var busboy = require('connect-busboy'); //middleware for form/file upload
var path = require('path'); //used for file path
var fs = require('fs-extra'); //File System - for file manipulation
var app = express();
app.use(busboy());
app.use(express.static(path.join(__dirname, 'public')));
/* ==========================================================
Create a Route (/upload) to handle the Form submission
(handle POST requests to /upload)
Express v4 Route definition
============================================================ */
app.route('/upload')
.post(function (req, res, next) {
var fstream;
req.pipe(req.busboy);
req.busboy.on('file', function (fieldname, file, filename) {
console.log("Uploading: " + filename);
//Path where image will be uploaded
fstream = fs.createWriteStream(__dirname + '/img/' + filename);
file.pipe(fstream);
fstream.on('close', function () {
console.log("Upload Finished of " + filename);
res.redirect('back'); //where to go next
});
});
});
var server = app.listen(3030, function() {
console.log('Listening on port %d', server.address().port);
});
INDEX.HTML
<!DOCTYPE html>
<html lang="en" ng-app="APP">
<head>
<meta charset="UTF-8">
<title>angular file upload</title>
</head>
<body>
<form method='post' action='upload' enctype="multipart/form-data">
<input type='file' name='fileUploaded'>
<input type='submit'>
</body>
</html>
The following will work with formidable SERVER.JS
var express = require('express'); //Express Web Server
var bodyParser = require('body-parser'); //connects bodyParsing middleware
var formidable = require('formidable');
var path = require('path'); //used for file path
var fs =require('fs-extra'); //File System-needed for renaming file etc
var app = express();
app.use(express.static(path.join(__dirname, 'public')));
/* ==========================================================
bodyParser() required to allow Express to see the uploaded files
============================================================ */
app.use(bodyParser({defer: true}));
app.route('/upload')
.post(function (req, res, next) {
var form = new formidable.IncomingForm();
//Formidable uploads to operating systems tmp dir by default
form.uploadDir = "./img"; //set upload directory
form.keepExtensions = true; //keep file extension
form.parse(req, function(err, fields, files) {
res.writeHead(200, {'content-type': 'text/plain'});
res.write('received upload:\n\n');
console.log("form.bytesReceived");
//TESTING
console.log("file size: "+JSON.stringify(files.fileUploaded.size));
console.log("file path: "+JSON.stringify(files.fileUploaded.path));
console.log("file name: "+JSON.stringify(files.fileUploaded.name));
console.log("file type: "+JSON.stringify(files.fileUploaded.type));
console.log("astModifiedDate: "+JSON.stringify(files.fileUploaded.lastModifiedDate));
//Formidable changes the name of the uploaded file
//Rename the file to its original name
fs.rename(files.fileUploaded.path, './img/'+files.fileUploaded.name, function(err) {
if (err)
throw err;
console.log('renamed complete');
});
res.end();
});
});
var server = app.listen(3030, function() {
console.log('Listening on port %d', server.address().port);
});
这篇关于Node / Express文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
