向Express服务器上传文件时req.body为空，如何正确接收文件？

不能用req.body接收文件，原因如下：

1. 直接发送File对象时，请求格式不符合文件上传要求，需用multipart/form-data格式传输，你当前的fetch请求未正确封装文件。
2. Express默认的express.json()中间件仅能解析JSON格式请求体，无法处理multipart/form-data类型的文件上传请求，因此req.body为空。

前端修改方案 #

用FormData对象封装文件，fetch会自动设置正确的Content-Type：

_("#fileElem2").addEventListener("change", (e) => {
    const file = _("#fileElem2").files[0];
    console.log(file);
    // 创建FormData并添加文件
    const formData = new FormData();
    formData.append("uploadedFile", file); // "uploadedFile"为后端接收的字段名
    fetch('/uploadFile', {
        method: 'POST',
        body: formData
    }).then(res => {
        console.log('上传响应:', res);
    }).catch(err => {
        console.error('上传失败:', err);
    })
})

function _(query) {
    return document.querySelector(query);
}

后端修改方案 #

需要使用multer中间件解析文件上传请求，步骤如下：

1. 安装multer：

npm install multer

2. 修改Express代码，配置multer并处理文件上传：

const express = require('express')
const app = express()
require('dotenv').config()
const http = require('http')
const port = process.env['port']
const path = require("path")
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);
const helmet = require("helmet");
// 导入multer
const multer = require('multer');

// 配置文件存储路径和文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 确保uploads目录已存在，否则会报错，可手动创建或代码自动生成
    cb(null, './uploads')
  },
  filename: function (req, file, cb) {
    // 自定义文件名，避免重名
    cb(null, Date.now() + '-' + file.originalname)
  }
})

const upload = multer({ storage: storage })

app.set('socketio', io);

// 使用upload.single('uploadedFile')解析单个文件，字段名要和前端一致
app.post("/uploadFile", upload.single('uploadedFile'), (req, res) => {
  // 上传的文件信息在req.file中
  console.log('文件信息:', req.file);
  // 如果有其他表单字段，可通过req.body获取
  res.status(200).send('文件上传成功')
})

app.use(express.static('static'))
app.use(express.json())
app.use(helmet())

app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, "html/index.html"));
})


server.listen(port, () => {
  console.log(`Server running on ${port}!`)
})

io.on("connection", (socket) => {
  // socketio stuff
})

关键注意点 #

• 确保服务器端的uploads目录存在，否则multer会抛出错误，可手动创建或通过代码自动生成。
• 如果需要上传多个文件，可使用upload.array('fieldName', count)替换upload.single()。

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