Express后端未接收到表单POST请求数据问题求助

问题核心：你使用了multipart/form-data编码的表单提交文件，但Express默认的express.urlencoded中间件不支持解析这种编码格式，所以后端无法获取到请求体和文件数据，导致req.body为空对象、req.files未定义。

解决方案：使用multer中间件处理文件上传 #

multer是Express生态中专门用于处理multipart/form-data类型请求的中间件，步骤如下：

1. 安装multer #

在项目目录下执行命令：

npm install multer
# 或使用yarn
yarn add multer

2. 修改Express后端代码，配置并使用multer #

更新后的后端代码：

import express from 'express'
import multer from 'multer'

const app = express()
// 配置multer：此处设置为内存存储（也可配置为磁盘持久化存储）
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

// 针对/partners路由，使用multer中间件指定接收name为input1的文件
app.post('/partners', upload.single('input1'), async function (req, res) {
  // req.body 可获取表单中的非文件字段（若存在）
  console.log(req.body, '>>>>>>>body')
  // req.file 对应表单中name="input1"的上传文件
  console.log(req.file, '>>>>>>>file')
  
  // 此处可添加文件处理逻辑，比如保存到磁盘、解析文件内容等
  
  res.status(200).send('文件上传成功')
})

app.listen(4000, () => console.log('Server running on port 4000'))

代码说明 #

• multer.memoryStorage()：将上传文件临时存储在内存中，适合轻量临时处理；若需要持久化存储，可使用multer.diskStorage()自定义保存路径与文件名规则。
• upload.single('input1')：表示接收单个文件，对应表单中name="input1"的文件输入框；若需接收多个文件，可使用upload.array('input1', 5)（最多5个同name文件）或upload.fields([{name: 'input1'}, {name: 'input2'}])处理多个不同name的文件。
• 上传的文件信息会存入req.file（单个文件场景）或req.files（多文件场景），包含文件名、大小、MIME类型等关键信息。

表单代码验证 #

你的HTML表单配置正确，encType="multipart/form-data"和文件输入框的name="input1"设置无误，无需修改。

内容的提问来源于stack exchange，提问作者Akshay Benny