新手求教 Nodejs 上传图片 req.files 不能获取的问题

新手求教 Nodejs 上传图片 req.files 不能获取的问题

使用ejs

index.html

<form method=“post” enctype=“multipart/form-data” action="/file-upload"> <input type=‘file’ name=‘file’ id=“file”/> <input type=‘submit’> </form>

app.js

app.use(express.bodyParser());

app.post(’/file-upload’,function(req, res){ console.log(req.files); res.send(‘return send’); });

但是打印的 req.files 为undefined.

求解答.谢谢各位.


5 回复

新手求教 Nodejs 上传图片 req.files 不能获取的问题

问题描述

我正在尝试使用 Node.js 和 EJS 来实现一个简单的文件上传功能。然而，当我提交表单时，req.files 却始终返回 undefined。这让我非常困惑。

环境配置

  • 使用 express 框架
  • 使用 body-parser 解析请求体

代码示例

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload Example</title>
</head>
<body>
    <form method="post" enctype="multipart/form-data" action="/file-upload">
        <input type="file" name="file" id="file"/>
        <input type="submit" value="Upload"/>
    </form>
</body>
</html>
app.js
const express = require('express');
const bodyParser = require('body-parser');

const app = express();

// 使用 body-parser 中间件来解析 multipart/form-data 类型的数据
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/file-upload', (req, res) => {
    console.log(req.files); // 应该输出文件信息
    res.send('File received successfully!');
});

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

解决方案

问题出在 body-parser 的使用上。body-parser 默认不支持解析 multipart/form-data 类型的数据。因此，我们需要使用专门处理文件上传的中间件，比如 multer。

安装 multer
npm install multer
更新 app.js
const express = require('express');
const multer = require('multer');

const app = express();

// 设置 multer 存储策略
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/') // 文件保存路径
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now()) // 文件名
    }
});

const upload = multer({ storage: storage });

app.post('/file-upload', upload.single('file'), (req, res) => {
    console.log(req.file); // 输出文件信息
    res.send('File received successfully!');
});

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

总结

使用 multer 可以更方便地处理文件上传，它会自动解析 multipart/form-data 类型的数据，并将文件信息存放在 req.file 中。这样你就可以通过 req.file 访问上传的文件了。希望这个解决方案对你有所帮助！


app.use(express.methodOverride()); //支持restful,，包括post, put, delete

会不会是使用ejs的问题？ 我也是同样的错误结果。

原来是这样的：

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

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

根据你的描述，问题出在 express.bodyParser() 这个中间件上。在较新的版本中，express.bodyParser() 已经被拆分成了多个独立的中间件，你需要使用 express multer 来处理文件上传。

以下是修正后的代码示例：

index.html

<form method="post" enctype="multipart/form-data" action="/file-upload">
    <input type='file' name='file' id="file"/>
    <input type='submit'>
</form>

app.js

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

const app = express();

// 配置Multer
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/') // 存储路径
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now()) // 文件名
    }
});

const upload = multer({ storage: storage });

app.post('/file-upload', upload.single('file'), (req, res) => {
    console.log(req.file); // 文件对象
    console.log(req.body); // 表单数据
    res.send('File uploaded successfully!');
});

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

解释

  1. 引入 Multer：Multer 是一个专门用于处理 multipart/form-data 的 Node.js 中间件，通常用于上传文件。

  2. 配置 Multer：multer.diskStorage 用于配置文件存储的位置和文件名。

  3. 使用 Multer：通过 upload.single('file') 指定接收一个名为 file 的文件。如果是多个文件则可以使用 upload.array('files', 3) 等方式。

  4. 处理请求：req.file 会包含上传文件的信息，而 req.body 包含表单中的其他字段信息（如果有）。

这样配置后，你应该能够在 req.files 或 req.file 中获取到上传的文件信息了。

回到顶部