HTML FormData文件无法提交至Express REST API，req.body为空

你的问题出在两个核心环节：前端手动设置了错误的请求头，以及后端缺少处理文件上传的专用中间件，导致服务器无法解析multipart/form-data格式的请求，最终req.body为空。

第一步：修复前端代码 #

问题点拆解： #

1. 手动指定Content-Type: multipart/form-data会丢失浏览器自动生成的boundary参数——这是multipart请求的核心标识，没有它后端根本无法拆分表单数据。
2. 箭头函数里的this.file指向错误，应该直接获取DOM元素实例。

修改后的前端代码： #

<form method="POST" id="form"> 
  <input type="file" id="file" name="file" multiple> 
  <input type="submit"> 
</form>
<script>
const form = document.querySelector('#form')
const fileInput = document.querySelector('#file')

const postFile = (e) => {
 e.preventDefault()
 let formData = new FormData()
 // 直接使用获取到的DOM元素，而非this指向
 formData.append('file', fileInput.files[0])
 
 fetch('http://localhost:3003/file', {
 method: form.method,
 // 移除手动设置的Content-Type，fetch会自动生成带boundary的正确请求头
 body: formData
 }).then(() => { alert("OK") }).catch(() => { alert("Nope") })
}
form.addEventListener('submit', postFile)
</script>

第二步：修复后端代码 #

Express默认的express.json()和express.urlencoded()中间件只能处理JSON、表单编码格式的请求，完全无法处理multipart/form-data类型的文件上传，我们需要借助multer这个专门的中间件来解决。

步骤1：安装multer #

npm install multer

步骤2：配置后端中间件与路由 #

修改server.js，添加multer的配置：

const server = express()
const routes = require('./routes')
const multer = require('multer')
// 配置multer为内存存储（方便直接转存到Firebase，也可按需改为磁盘存储）
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

server.use(cors())
// 保留原有中间件用于其他接口，它们不影响文件上传逻辑
server.use(express.urlencoded({ limit: '50mb', extended: true }))
server.use(express.json({ limit: '50mb', extended: true }))

// 在路由中挂载multer中间件：upload.single('file')处理单个名为file的文件
// 若要处理多个文件，改用upload.array('file', 5)（5为最大文件数）
server.post('/file', upload.single('file'), routes.addFile)

server.listen(3003)

步骤3：修改fileController.js，完成Firebase Storage上传 #

先确保已初始化Firebase Admin SDK（未初始化的话先安装依赖并配置服务账号）：

npm install firebase-admin

然后更新控制器代码：

const admin = require('firebase-admin')
// 初始化Firebase Admin（替换为你的服务账号配置和存储桶名称）
if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert('./path-to-your-service-account-key.json'),
    storageBucket: 'your-bucket-name.appspot.com'
  })
}
const bucket = admin.storage().bucket()

exports.addFile = async (req, res) => {
 try {
  // 上传的文件会存在req.file中，而非req.body
  if (!req.file) {
    return res.status(400).send({ message: "未检测到上传文件" })
  }

  // 准备上传到Firebase Storage的配置
  const file = bucket.file(req.file.originalname)
  const stream = file.createWriteStream({
    metadata: {
      contentType: req.file.mimetype
    }
  })

  // 处理文件流的完成与错误
  await new Promise((resolve, reject) => {
    stream.on('finish', resolve)
    stream.on('error', reject)
    stream.end(req.file.buffer)
  })

  // 可选：生成文件的公开访问链接
  const [url] = await file.getSignedUrl({
    action: 'read',
    expires: '03-01-2500'
  })

  console.log('文件上传成功：', url)
  return res.status(200).send({ message: "文件上传完成", fileUrl: url })
 } catch (e) {
  console.error('上传失败：', e)
  return res.status(500).send({ message: e.message })
 }
}

验证 #

重启前端和后端服务后，上传文件即可看到服务器正确获取到文件，并成功同步到Firebase Storage。

内容的提问来源于stack exchange，提问作者Rafael Scherer