Nodejs Express3.2 使用表单上传文件的问题,求解

###文件App.js中的express上传设置 app.use(express.bodyParser({ uploadDir:“public/images”, keepExtensions : true, limit:100000000, defer:true }));

###上传html

后台接受

exports.upload = function (req, res) {

console.log(req.body);
req.form.on(‘progress’, function(bytesReceived, bytesExpected) {
 console.log(((bytesReceived / bytesExpected)*100) + "% uploaded");
});
req.form.on(‘end’, function() {
console.log(req.files);
 var picName = req.files.pic.name;

 fs.rename(req.files.pic.path, "./public/images/pics/" + picName, function (err) {
     if (err) throw err;
     fs.unlink(req.files.pic.path, function () {
         if (err) throw err;
         //res.send('File uploaded to: ' + target_path + ' - ' + req.files.thumbnail.size + ' bytes');
     });
 });
 res.send("done");
});

}

点击上传， console.log(req.body) 的结果是｛｝，空文件pic null;

求大神帮忙，2个多星期了，一致没解决！真心谢谢

nodeper 1楼

Node.js Express3.2 使用表单上传文件的问题

在使用 Node.js 和 Express 3.2 进行文件上传时遇到问题，特别是在处理表单数据时。根据你的描述，console.log(req.body) 的结果为空，这通常意味着表单数据没有正确解析。以下是一些可能的解决方案和改进方法。

1. 更新中间件

Express 3.x 中 bodyParser 已经被移除，你需要使用第三方库如 multer 来处理文件上传。以下是更新后的代码示例：

var express = require('express');
var multer = require('multer');

var app = express();
var upload = multer({ dest: 'public/images/' });

app.use(express.static(__dirname + '/public'));

app.post('/upload', upload.single('pic'), function (req, res, next) {
    console.log(req.body);
    console.log(req.file);

    var picName = req.file.filename;
    var newPath = __dirname + '/public/images/pics/' + picName;

    fs.rename(req.file.path, newPath, function (err) {
        if (err) throw err;
        fs.unlink(req.file.path, function () {
            if (err) throw err;
            res.send('File uploaded successfully.');
        });
    });
});

app.listen(3000, function () {
    console.log('Server is running on port 3000');
});

2. 更新 HTML 表单

确保你的 HTML 表单正确地指定了 enctype="multipart/form-data"，这是上传文件所必需的。

<form method="post" enctype="multipart/form-data" action="/upload">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="file" name="pic">
    <input type="submit">
</form>

3. 安装依赖

确保你已经安装了必要的依赖包：

npm install express multer

4. 文件路径和重命名

在上面的代码中，我们使用 fs.rename 将上传的文件移动到指定目录，并删除临时文件。确保目标目录存在并且有写入权限。

通过这些步骤，你应该能够成功处理文件上传，并且 console.log(req.body) 应该能正确输出表单数据，而 console.log(req.file) 则会输出文件信息。

希望这些信息对你有所帮助！如果还有其他问题，请随时提问。

ionicwang 2楼

你可以试一下multiparty，你如果只用bodyParser是不支持事件的。

bupafengyu 3楼

我也是初学，当时研究上传也搞不懂。如果用第三方插件，记得把defer开起来，不然请求就全部都在bodyParser 这里了。

https://npmjs.org/package/multiparty

yibo5220 4楼

可阅读node高级课程《Node服务器框架开发实战》

QQ群 244728015

bupafengyu 5楼

没看，看不了！！！

ionicwang 6楼

能不能给我一个小例子啊，看了半天还是不太明白

phonegap100 7楼

请问解决了吗？

ionicwang 8楼

我也是遇到同样的问题，不知所措啊

ionicwang 9楼

原来是这样的：

app.use(express.bodyParser({uploadDir:’./tmp’})); //一定要放在app.use(app.router);前面 app.use(app.router);

找了好久才找到原因。。。

h691938207 10楼

貌似 req.form.on(‘end’ 根本就不执行

app.post('/upload', function (req, res) {
console.log(req.body);
 req.form.on('progress', function(bytesReceived, bytesExpected) {
 console.log(((bytesReceived / bytesExpected)*100) + "% uploaded");
});
req.form.on(‘end’, function() {
console.log('end … ');
//  console.log(req.files);
 var picName = req.files.pic.name;
console.log(‘end … ‘+req.files.pic.path +’—>’+ “public\images\pics\” + picName)
fs.rename(req.files.pic.path, “public\images\pics\” + picName, function (err) {
if (err) throw err;
console.log(‘unlink’);
fs.unlink(req.files.pic.path, function () {
if (err) throw err;
res.send(‘File uploaded to: ’ + target_path + ’ - ’ + req.files.thumbnail.size + ’ bytes’);
     });
       
 });
});
});

h691938207 11楼

根据你的描述，req.body 为空，并且 req.files 也不存在，这通常意味着你的文件上传没有正确配置。以下是可能的解决方案：

确保正确安装中间件：确保你已经安装了 connect-form，这是一个用于处理文件上传的中间件。
```
npm install connect-form --save
```

修改 Express 配置：修改你的 app.js 文件，使用 connect-form 中间件来处理文件上传。

var express = require('express');
var app = express();
var form = require('connect-form');

app.use(form({
    uploadDir: __dirname + '/public/images',
    keepExtensions: true,
    maxFieldsSize: 100 * 1024 * 1024, // 限制最大文件大小为100MB
    multiples: true // 允许多次上传
}));

app.post('/upload', function(req, res) {
    req.form.on('progress', function(bytesReceived, bytesExpected) {
        console.log(((bytesReceived / bytesExpected) * 100) + '% uploaded');
    });

    req.form.on('end', function() {
        console.log(req.files);
        var picName = req.files.pic.name;
        var newPath = __dirname + '/public/images/pics/' + picName;
        fs.rename(req.files.pic.path, newPath, function(err) {
            if (err) throw err;
            fs.unlink(req.files.pic.path, function(err) {
                if (err) throw err;
                res.send('File uploaded to: ' + newPath);
            });
        });
    });

    req.form.parse(function(err, fields, files) {
        if (err) {
            return res.status(500).send('Error processing the request');
        }
        req.files = files;
        req.body = fields;
        res.send('Received upload');
    });
});

app.listen(3000);

HTML 表单：保持你的 HTML 表单不变。

<form method="post" enctype="multipart/form-data" action="/upload">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="file" name="pic">
    <input type="submit">
</form>

通过这些步骤，你应该能够成功处理文件上传。注意确保路径和中间件配置正确。