Nodejs中获取req.files一直为undefined 请问是什么情况

Nodejs中获取req.files一直为undefined 请问是什么情况

<div id=“login”>
<h2>用户登录</h2>
<form method=“post” enctype=“multipart/form-data” action=“http://localhost:3000/site/upload/20008”>
用户名：<input id=“contact” type=“file”  /><br/>
<input type=“submit” class=“btn_login” value=“登录” />
</form>
</div>


console.log(req.files);


9 回复

Node.js 中获取 req.files 一直为 undefined 是什么情况？

在使用 Node.js 处理文件上传时，经常会遇到 req.files 为 undefined 的问题。这通常是由于缺少必要的中间件来解析表单数据导致的。

在你的示例代码中，HTML 表单使用了 enctype="multipart/form-data"，这是用于文件上传的标准方式。但是，为了正确解析这种表单数据，你需要使用一个中间件，例如 multer。

示例代码

首先，确保你已经安装了 multer：

npm install multer

然后，在你的服务器代码中配置并使用 multer：

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('/site/upload/20008', upload.single('contact'), (req, res) => {
    console.log(req.file); // 这里是上传的文件对象
    console.log(req.body); // 这里是其他表单字段
    res.send('文件上传成功');
});

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

解释

  1. Multer 中间件：multer 是一个专门用于处理 multipart/form-data 的中间件。你需要先创建一个 upload 实例，并指定存储策略（如上所示）。

  2. 表单字段名称：在 HTML 表单中，<input> 元素的 name 属性应与 multer 中定义的字段名称一致。你的表单中 <input> 的 name 应该是 contact。

  3. 路由处理：在处理文件上传的路由中，使用 upload.single('contact') 来指定要处理的文件字段。这样，req.file 就会包含上传的文件信息，而 req.body 包含其他表单字段。

  4. 错误处理：如果文件上传失败，multer 会自动将错误添加到请求中，你可以通过捕获这些错误来提供更好的用户体验。

通过上述步骤，你应该能够解决 req.files 为 undefined 的问题。


增加一个中间件到express种 app.use(express.bodyParser({uploadDir: ‘./uploads’}))

增加了之后还是不行，会不会是 enctype=“multipart/form-data” 的原因? console.log(req.body); console.log(req.files); 结果分别为： {} undefined 但是 去掉enctype="multipart/form-data" console.log(req.body); console.log(req.files); 结果分别为： {username:“abc”，password:“123” ，thumbnail:“a.txt”>} undefined

原来是这样的：

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

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

我的也是这个情况，按楼上说的放到前面也还是不行。改用别的中间件了

建议用multer 自豪地采用 CNodeJS ionic

纠正下楼主的编程风格，首先你的form里的action要写成相对路径，因为你不可能每次发布都去修改一次源代码对吧？ 其次你的表单input属性没有name属性，POST提交表单后台接收需要寻找name属性标签的

很开心看到楼主最终解决问题。Express中设置中间件的顺序是很重要的，先设置好中间件，在绑定router。中间件把请求处理完之后（也就是经过解析文件，产生了req.files），在传到后继的router中，router才能继续处理。大概原理是这样 ：）

从你提供的代码来看，有几个问题可能导致 req.files 一直是 undefined。首先，HTML 中的文件输入元素（<input type="file">）应该放在表单中，但是你当前的 HTML 表单中只有一个文件输入字段，而没有其他必要的输入字段来提交表单数据。其次，确保你的后端代码正确地解析了 multipart/form-data 类型的数据。

示例代码

前端 HTML

<div id="login">
    <h2>用户登录</h2>
    <form method="post" enctype="multipart/form-data" action="/site/upload/20008">
        文件： <input id="contact" name="file" type="file" /> <br/>
        <input type="submit" class="btn_login" value="上传" />
    </form>
</div>

后端 Node.js 代码

你需要使用 multer 这个中间件来处理文件上传。

  1. 安装 multer：

    npm install multer

  2. 配置并使用 multer 中间件：

    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('/site/upload/20008', 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');
});

通过上述配置，你可以捕获上传的文件，并且可以通过 req.file 访问文件信息。同时，req.body 可以访问其他表单数据（如果你有的话）。

总结

  • 确保 HTML 表单中有一个 <input type="file"> 元素。
  • 使用 multer 处理文件上传。
  • 通过 upload.single('file') 指定文件字段名称。
  • 在后端代码中，req.file 将包含上传的文件信息。
回到顶部