使用Express 4.0上传文件:req。文件未定义

我试图获得一个简单的文件上传机制与Express 4.0工作，但我一直在app.post体req.files得到undefined。以下是相关代码:

var bodyParser = require('body-parser');
var methodOverride = require('method-override');
//...
app.use(bodyParser({ uploadDir: path.join(__dirname, 'files'), keepExtensions: true }));
app.use(methodOverride());
//...
app.post('/fileupload', function (req, res) {
console.log(req.files);
res.send('ok');
});

．． 以及附带的Pug代码:

form(name="uploader", action="/fileupload", method="post", enctype="multipart/form-data")
input(type="file", name="file", id="file")
input(type="submit", value="Upload")
< p > 解决方案 < br > 由于下面mscdex的响应，我已经改用busboy而不是bodyParser:

var fs = require('fs');
var busboy = require('connect-busboy');
//...
app.use(busboy());
//...
app.post('/fileupload', function(req, res) {
var fstream;
req.pipe(req.busboy);
req.busboy.on('file', function (fieldname, file, filename) {
console.log("Uploading: " + filename);
fstream = fs.createWriteStream(__dirname + '/files/' + filename);
file.pipe(fstream);
fstream.on('close', function () {
res.redirect('back');
});
});
});
294928 次浏览
小开
最佳答案

body-parser模块只处理JSON和urlencoded表单提交，而不是multipart(如果你上传文件，就会是这种情况)。

对于multipart，你需要使用类似connect-busboy或multer或connect-multiparty (multiparty/formidable是最初在express bodyParser中间件中使用的)。也FWIW，我正在工作在busboy上面的一个更高级别的层，称为reformed。它带有一个Express中间件，也可以单独使用。

小开

它看起来像body-parser 做了支持在Express 3中上传文件，但当它不再将Connect作为依赖项包含时，对Express 4的支持被放弃了

在查看了mscdex的答案中的一些模块后，我发现express-busboy是一个更好的替代方案，也是最接近临时替代品的方法。我注意到的唯一不同之处是上传文件的属性。

console.log(req.files)使用分析体 (Express 3)输出一个如下所示的对象:

{ file:
{ fieldName: 'file',
originalFilename: '360px-Cute_Monkey_cropped.jpg',
name: '360px-Cute_Monkey_cropped.jpg'
path: 'uploads/6323-16v7rc.jpg',
type: 'image/jpeg',
headers:
{ 'content-disposition': 'form-data; name="file"; filename="360px-Cute_Monkey_cropped.jpg"',
'content-type': 'image/jpeg' },
ws:
WriteStream { /* ... */ },
size: 48614 } }

与使用express-busboy (Express 4)的console.log(req.files)相比:

{ file:
{ field: 'file',
filename: '360px-Cute_Monkey_cropped.jpg',
file: 'uploads/9749a8b6-f9cc-40a9-86f1-337a46e16e44/file/360px-Cute_Monkey_cropped.jpg',
mimetype: 'image/jpeg',
encoding: '7bit',
truncated: false
uuid: '9749a8b6-f9cc-40a9-86f1-337a46e16e44' } }
小开

以下是我在谷歌上找到的:

var fileupload = require("express-fileupload");
app.use(fileupload());

哪个上传机制比较简单

app.post("/upload", function(req, res)
{
var file;


if(!req.files)
{
res.send("File was not found");
return;
}


file = req.files.FormFieldName;  // here is the field name of the form


res.send("File Uploaded");




});
小开

express-fileupload看起来是目前唯一还能工作的中间件。

在同一个例子中，multer和connect-multiparty给出了一个未定义的req.file或req.files值，但express-fileupload有效。

关于req.file / req.files的空值有很多疑问和问题。

小开

乘是一个中间件，它处理“multipart/form-data”，并且神奇地&使上传的文件和表格数据可提供给我们在请求作为请求。文件和request.body。

正在安装multer:—npm install multer --save

在.html文件中:-

<form method="post" enctype="multipart/form-data" action="/upload">
<input type="hidden" name="msgtype" value="2"/>
<input type="file" name="avatar" />
<input type="submit" value="Upload" />
</form>

.js文件:-

var express = require('express');
var multer = require('multer');
var app = express();
var server = require('http').createServer(app);
var port = process.env.PORT || 3000;
var upload = multer({ dest: 'uploads/' });


app.use(function (req, res, next) {
console.log(req.files); // JSON Object
next();
});


server.listen(port, function () {
console.log('Server successfully running at:-', port);
});


app.get('/', function(req, res) {
res.sendFile(__dirname + '/public/file-upload.html');
})


app.post('/upload', upload.single('avatar'),  function(req, res) {
console.log(req.files); // JSON Object
});

希望这能有所帮助!

小开

问题解决!!!!!!!

结果storage函数甚至没有运行一次。 因为我必须包括app.use(upload)作为upload = multer({storage}).single('file');

 let storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './storage')
},
filename: function (req, file, cb) {
console.log(file) // this didn't print anything out so i assumed it was never excuted
cb(null, file.fieldname + '-' + Date.now())
}
});


const upload = multer({storage}).single('file');
小开

请使用以下代码

app.use(fileUpload());
小开
1)确保你的文件确实是从客户端发送的。例如，你可以在Chrome控制台检查它: 截图 < / p >

2)下面是NodeJS后台的基本示例:

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();


app.use(fileUpload()); // Don't forget this line!


app.post('/upload', function(req, res) {
console.log(req.files);
res.send('UPLOADED!!!');
});
小开

只是为了补充上面的答案，你可以将express-fileupload的使用简化为只需要它的单个路由，而不是将它添加到每个路由。

let fileupload = require("express-fileupload");


...


//Make sure to call fileUpload to get the true handler
app.post("/upload", fileupload(), function(req, res){


...


});
小开

一个包安装需要这个功能，有很多，但我个人更喜欢“express-fileupload”。只需通过“npm I express-fileupload"命令，然后在根文件中使用此命令

const fileUpload = require("express-fileupload");
app.use(fileUpload());
小开
我在methooverride中间件之前添加了multer作为全局中间件， 它在路由器中工作。

const upload = multer({
storage: storage
}).single('featuredImage');
app.use(upload);


app.use(methodOverride(function (req, res) {
...
}));
小开

可怕的:

const formidable = require('formidable');


app.post('/api/upload', (req, res, next) => {
const form = formidable({ multiples: true });


form.parse(req, (err, fields, files) => {
if (err) {
next(err);
return;
}
res.json({ fields, files });
});
});

https://www.npmjs.com/package/formidable


提交答案