ExpressJS & Multer上传文件时req.body返回[Object: null prototype] {}问题

核心问题说明 #

你当前的误区是文件信息不在req.body中，multer处理单文件上传后，文件数据会存储在req.file对象里；而req.file为undefined，是因为存在字段匹配或跨域配置的问题。

解决方案步骤 #

1. 修正服务器端的打印逻辑 #

先调整代码，从正确的位置获取文件信息：

const multer = require("multer");
const cors = require('cors'); // 若跨域需添加

// 配置CORS（跨域场景必须）
app.use(cors({
    origin: '你的前端域名', // 例如http://localhost:3000，不能用*
    credentials: true
}));

app.use(express.json());
app.use(express.urlencoded({extended : true}));

const multerUpload = multer();
const multerMiddleware = multerUpload.single('post_file');

app.post('/setupPictures', multerMiddleware, (req, res) => {
    // 从req.file中获取文件信息
    if (req.file) {
        console.log({ post_file: req.file.originalname });
    } else {
        console.log('未接收到文件');
    }
    res.send({"status" : "200"});
})

2. 排查前端与配置问题 #

如果修改后仍无法获取req.file，按以下步骤检查：

• 确认文件输入框的name属性：前端文件输入框的name必须和multer配置的single('post_file')完全一致：

  <input type="file" id="myFileInput" name="post_file">
  

• 验证请求格式：在Chrome网络面板中，查看请求的Content-Type是否为multipart/form-data; boundary=xxxx，若不是，检查前端contentType: false是否生效（可尝试更新jQuery版本）。
• 可选：配置磁盘存储：如果需要将文件保存到服务器，可替换multer初始化代码：

  const storage = multer.diskStorage({
      destination: (req, file, cb) => {
          cb(null, './uploads') // 确保uploads目录已创建
      },
      filename: (req, file, cb) => {
          cb(null, file.originalname)
      }
  });
  const multerUpload = multer({ storage: storage });
  

预期输出 #

调整完成后，服务器端会打印：

{ post_file: 'example.jpg' }

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