请考虑具有更多最新信息的更新答案，因为多年来情况发生了变化！
由于许多新的 Node.js 库很快就被淘汰了，而且无论如何我想问的关于上传图像的例子相对较少：
- Node.js (v0.4.1)
- 快递 (1.0.7)
- 猫鼬（1.1.0）。
别人是怎么做到的？
我找到了：node-formidable，但我一般是上传图片的新手，所以我想学习一般的东西和使用 Node.js 和 Express 的方法。
问问题
131475 次
13 回答
74
我将第一次回答我自己的问题。我直接从源代码中找到了一个示例。请原谅可怜的缩进。我不确定在复制和粘贴时如何正确缩进。代码直接来自 GitHub 上的 Expressmultipart/form-data示例。
// Expose modules in ./support for demo purposes
require.paths.unshift(__dirname + '/../../support');
/**
* Module dependencies.
*/
var express = require('../../lib/express')
, form = require('connect-form');
var app = express.createServer(
// connect-form (http://github.com/visionmedia/connect-form)
// middleware uses the formidable middleware to parse urlencoded
// and multipart form data
form({ keepExtensions: true })
);
app.get('/', function(req, res){
res.send('<form method="post" enctype="multipart/form-data">'
+ '<p>Image: <input type="file" name="image" /></p>'
+ '<p><input type="submit" value="Upload" /></p>'
+ '</form>');
});
app.post('/', function(req, res, next){
// connect-form adds the req.form object
// we can (optionally) define onComplete, passing
// the exception (if any) fields parsed, and files parsed
req.form.complete(function(err, fields, files){
if (err) {
next(err);
} else {
console.log('\nuploaded %s to %s'
, files.image.filename
, files.image.path);
res.redirect('back');
}
});
// We can add listeners for several form
// events such as "progress"
req.form.on('progress', function(bytesReceived, bytesExpected){
var percent = (bytesReceived / bytesExpected * 100) | 0;
process.stdout.write('Uploading: %' + percent + '\r');
});
});
app.listen(3000);
console.log('Express app started on port 3000');
于 2011-03-01T01:35:51.490 回答
46
由于您使用的是 express，因此只需添加 bodyParser：
app.use(express.bodyParser());
那么你的路由会自动访问 req.files 中上传的文件：
app.post('/todo/create', function (req, res) {
// TODO: move and rename the file using req.files.path & .name)
res.send(console.dir(req.files)); // DEBUG: display available fields
});
如果您像这样（在 Jade 中）将输入控件命名为“todo”：
form(action="/todo/create", method="POST", enctype="multipart/form-data")
input(type='file', name='todo')
button(type='submit') New
然后，当您在“files.todo”中获得路径和原始文件名时，上传的文件就准备好了：
- req.files.todo.path，和
- req.files.todo.name
其他有用的 req.files 属性：
- 大小（以字节为单位）
- 类型（例如，'image/png'）
- 最后修改日期
- _writeStream.encoding（例如，“二进制”）
于 2012-03-20T21:42:29.013 回答
19
您可以在主应用程序文件的配置块中配置连接主体解析器中间件：
/** Form Handling */
app.use(express.bodyParser({
uploadDir: '/tmp/uploads',
keepExtensions: true
}))
app.use(express.limit('5mb'));
于 2012-05-15T12:46:19.967 回答
14
看，您能做的最好的事情就是将图像上传到磁盘并将 URL 保存在 MongoDB 中。再次检索图像时休息。只需指定 URL，您将获得一张图片。上传代码如下。
app.post('/upload', function(req, res) {
// Get the temporary location of the file
var tmp_path = req.files.thumbnail.path;
// Set where the file should actually exists - in this case it is in the "images" directory.
target_path = '/tmp/' + req.files.thumbnail.name;
// Move the file from the temporary location to the intended location
fs.rename(tmp_path, target_path, function(err) {
if (err)
throw err;
// Delete the temporary file, so that the explicitly set temporary upload dir does not get filled with unwanted files.
fs.unlink(tmp_path, function() {
if (err)
throw err;
//
});
});
});
现在将目标路径保存在 MongoDB 数据库中。
同样，在检索图像时，只需从 MongoDB 数据库中提取 URL，并将其用于此方法。
fs.readFile(target_path, "binary", function(error, file) {
if(error) {
res.writeHead(500, {"Content-Type": "text/plain"});
res.write(error + "\n");
res.end();
}
else {
res.writeHead(200, {"Content-Type": "image/png"});
res.write(file, "binary");
}
});
于 2012-09-13T08:09:52.780 回答
9
试试这个代码。它会有所帮助。
app.get('/photos/new', function(req, res){
res.send('<form method="post" enctype="multipart/form-data">'
+ '<p>Data: <input type="filename" name="filename" /></p>'
+ '<p>file: <input type="file" name="file" /></p>'
+ '<p><input type="submit" value="Upload" /></p>'
+ '</form>');
});
app.post('/photos/new', function(req, res) {
req.form.complete(function(err, fields, files) {
if(err) {
next(err);
} else {
ins = fs.createReadStream(files.photo.path);
ous = fs.createWriteStream(__dirname + '/directory were u want to store image/' + files.photo.filename);
util.pump(ins, ous, function(err) {
if(err) {
next(err);
} else {
res.redirect('/photos');
}
});
//console.log('\nUploaded %s to %s', files.photo.filename, files.photo.path);
//res.send('Uploaded ' + files.photo.filename + ' to ' + files.photo.path);
}
});
});
if (!module.parent) {
app.listen(8000);
console.log("Express server listening on port %d, log on to http://127.0.0.1:8000", app.address().port);
}
于 2011-11-10T05:14:30.260 回答
8
您还可以使用以下内容设置保存文件的路径。
req.form.uploadDir = "<path>";
于 2012-01-17T11:50:47.157 回答
5
我创建了一个使用 Express 和 Multer 的示例。它非常简单，并且避免了所有Connect警告
它可能会帮助某人。
于 2014-03-30T17:24:59.143 回答
2
对于 Express 3.0，如果要使用强大的事件，则必须删除多部分中间件，以便创建它的新实例。
去做这个：
app.use(express.bodyParser());
可以写成：
app.use(express.json());
app.use(express.urlencoded());
app.use(express.multipart()); // Remove this line
现在创建表单对象：
exports.upload = function(req, res) {
var form = new formidable.IncomingForm;
form.keepExtensions = true;
form.uploadDir = 'tmp/';
form.parse(req, function(err, fields, files){
if (err) return res.end('You found error');
// Do something with files.image etc
console.log(files.image);
});
form.on('progress', function(bytesReceived, bytesExpected) {
console.log(bytesReceived + ' ' + bytesExpected);
});
form.on('error', function(err) {
res.writeHead(400, {'content-type': 'text/plain'}); // 400: Bad Request
res.end('error:\n\n'+util.inspect(err));
});
res.end('Done');
return;
};
我也在我的博客上发布了这个，在上传时在 Express 3.0 中获取强大的表单对象。
于 2012-12-02T08:57:42.840 回答
2
同样，如果您不想使用 bodyParser，则可以使用以下方法：
var express = require('express');
var http = require('http');
var app = express();
app.use(express.static('./public'));
app.configure(function(){
app.use(express.methodOverride());
app.use(express.multipart({
uploadDir: './uploads',
keepExtensions: true
}));
});
app.use(app.router);
app.get('/upload', function(req, res){
// Render page with upload form
res.render('upload');
});
app.post('/upload', function(req, res){
// Returns json of uploaded file
res.json(req.files);
});
http.createServer(app).listen(3000, function() {
console.log('App started');
});
于 2014-04-11T22:49:50.990 回答
1
我知道原始问题与特定版本有关，但它也提到了“最新”-@JohnAllen 的帖子由于Expressjs bodyParser 和 connect-form不再相关
这演示了易于使用的内置 bodyParser()：
/**
* Module dependencies.
*/
var express = require('express')
var app = express()
app.use(express.bodyParser({ keepExtensions: true, uploadDir: '/home/svn/rest-api/uploaded' }))
app.get('/', function(req, res){
res.send('<form method="post" enctype="multipart/form-data">'
+ '<p>Image: <input type="file" name="image" /></p>'
+ '<p><input type="submit" value="Upload" /></p>'
+ '</form>');
});
app.post('/', function(req, res, next){
res.send('Uploaded: ' + req.files.image.name)
return next()
});
app.listen(3000);
console.log('Express app started on port 3000');
于 2014-05-12T00:15:35.997 回答
0
这是一种使用强大的包上传图像的方法，在以后的 Express 版本中推荐使用该包而不是 bodyParser。这还包括动态调整图像大小的能力：
来自我的网站：使用 Node.js 和 Express 上传和调整图像大小（即时）。
这是要点：
var express = require("express"),
app = express(),
formidable = require('formidable'),
util = require('util')
fs = require('fs-extra'),
qt = require('quickthumb');
// Use quickthumb
app.use(qt.static(__dirname + '/'));
app.post('/upload', function (req, res){
var form = new formidable.IncomingForm();
form.parse(req, function(err, fields, files) {
res.writeHead(200, {'content-type': 'text/plain'});
res.write('received upload:\n\n');
res.end(util.inspect({fields: fields, files: files}));
});
form.on('end', function(fields, files) {
/* Temporary location of our uploaded file */
var temp_path = this.openedFiles[0].path;
/* The file name of the uploaded file */
var file_name = this.openedFiles[0].name;
/* Location where we want to copy the uploaded file */
var new_location = 'uploads/';
fs.copy(temp_path, new_location + file_name, function(err) {
if (err) {
console.error(err);
} else {
console.log("success!")
}
});
});
});
// Show the upload form
app.get('/', function (req, res){
res.writeHead(200, {'Content-Type': 'text/html' });
/* Display the file upload form. */
form = '<form action="/upload" enctype="multipart/form-data" method="post">'+ '<input name="title" type="text" />
'+ '<input multiple="multiple" name="upload" type="file" />
'+ '<input type="submit" value="Upload" />'+ '</form>';
res.end(form);
});
app.listen(8080);
注意：这需要 Image Magick 来快速调整拇指大小。
于 2014-07-07T23:34:58.940 回答
0
我有多个上传文件的方法：
节点：
router.post('/upload', function(req , res) {
var multiparty = require('multiparty');
var form = new multiparty.Form();
var fs = require('fs');
form.parse(req, function(err, fields, files) {
var imgArray = files.imatges;
for (var i = 0; i < imgArray.length; i++) {
var newPath = './public/uploads/'+fields.imgName+'/';
var singleImg = imgArray[i];
newPath+= singleImg.originalFilename;
readAndWriteFile(singleImg, newPath);
}
res.send("File uploaded to: " + newPath);
});
function readAndWriteFile(singleImg, newPath) {
fs.readFile(singleImg.path , function(err,data) {
fs.writeFile(newPath,data, function(err) {
if (err) console.log('ERRRRRR!! :'+err);
console.log('Fitxer: '+singleImg.originalFilename +' - '+ newPath);
})
})
}
})
确保您的表单具有 enctype="multipart/form-data"
我希望这能帮到你；）
于 2016-10-11T19:26:35.703 回答
0
转换为字符串后存储文件将变得很容易，您只需在前端将字符串转换为图像
在您的 api 中使用此代码将图像转换为 base64 字符串，并且不要忘记从上传文件夹中删除文件
"img": new Buffer.from(fs.readFileSync(req.file.path)).toString("base64")
删除文件
let resultHandler = function (err) {
if (err) {
console.log("unlink failed", err);
} else {
console.log("file deleted");
}
}
fs.unlink(req.file.path, resultHandler);
在你的路线进口multer
`multer const multer = require('multer');
const upload = multer({ dest: __dirname + '/uploads/images' });`
Add upload.single('img') in your request
router.post('/fellows-details', authorize([Role.ADMIN, Role.USER]),
upload.single('img'), usersController.fellowsdetails);
或者
如果您想保存图像localstorage并希望在数据库中保存路径，您可以尝试以下方法
您必须先安装将创建文件夹的 fs-extra。我正在按 id 创建单独的文件夹，如果你想删除它，你可以删除它。并保存上传图像的路径，将此代码添加到您用于保存图像的 api 或控制器中，并将其与其他数据一起添加到数据库中
let Id = req.body.id;
let path = `tmp/daily_gasoline_report/${Id}`;
multer为like创建单独的文件夹multerHelper.js
const multer = require('multer');
let fs = require('fs-extra');
let storage = multer.diskStorage({
destination: function (req, file, cb) {
let Id = req.body.id;
let path = `tmp/daily_gasoline_report/${Id}`;
fs.mkdirsSync(path);
cb(null, path);
},
filename: function (req, file, cb) {
// console.log(file);
let extArray = file.mimetype.split("/");
let extension = extArray[extArray.length - 1];
cb(null, file.fieldname + '-' + Date.now() + "." + extension);
}
})
let upload = multer({ storage: storage });
let createUserImage = upload.array('images', 100);
let multerHelper = {
createUserImage,
}
module.exports = multerHelper;
在您的路线导入multerhelper文件中
const multerHelper = require("../helpers/multer_helper");
router.post(multerHelper. createUserImage , function(req, res, next) {
//Here accessing the body datas.
})
于 2020-10-09T06:40:07.820 回答