使用POST请求上传图片到服务器时服务端接收空对象如何解决

1. 客户端请求头配置错误 #

使用fetch发送FormData格式请求时，不需要手动设置Content-Type: multipart/form-data。浏览器会自动为请求添加该请求头，同时自动生成表单字段分隔所需的boundary参数。手动设置的请求头不会携带boundary，会导致服务端无法识别表单的字段边界，无法解析内容。

修正后的客户端代码：

// 客户端
function uploadFile(thumbnailRef) {
  const thumbnail = thumbnailRef.current.files[0];
  const formData = new FormData();
  formData.append('file', thumbnail)

  fetch('http://localhost:8080/upload', {
    method: 'POST',
    body: formData
    // 移除手动设置的Content-Type头
  }).then(res => { console.log(res) })
    .catch(err => console.log(err))
}

2. 服务端缺少multipart请求解析中间件 #

Express 原生仅支持解析application/json和application/x-www-form-urlencoded格式的请求，无法直接解析用于文件上传的multipart/form-data格式请求，需要引入专门的解析中间件multer处理文件上传。

修复步骤： #

• 首先安装依赖：npm install multer
• 修正后的服务端代码：

// 服务端
const express = require('express');
const multer = require('multer');
const app = express();

// 配置multer，dest是文件临时存储目录
const upload = multer({ dest: 'uploads/' })

// upload.single('file')对应前端formData.append的字段名'file'
app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file) // 打印上传的文件信息
  console.log(req.body) // 打印表单内的普通字段内容
  res.end()
})

app.listen(8080)

注意：单文件上传场景下，文件信息会挂载到req.file属性，而非req.body。

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