使用express-fileupload+AntD Form上传文件时req.files为null的问题

问题详情 #

我用express-fileupload、Next.js和AntD Form提交form-data时，req.body能正常获取表单数据，但req.files始终是null。

前端请求代码 #

function* workCreateUser({ payload }: PayloadAction<ICreateUser>): any {
  let formData = new FormData()
  
  formData.append('picture', JSON.stringify(payload.picture.file))
  formData.append('login', payload.login)
  formData.append('name', payload.name)
  formData.append('color', payload.color)
 
  const response = yield call(() =>
    fetch(`${URL_SERVER}api/users`, {
      method: 'POST',
      body: formData,
    })
  )
}

后端API代码 #

class UserController {
  async create(req, res) {
    try {
      console.log('req.body******', req.body)
      console.log('req.files', req.files)
      const user = await UserService.create(req.body, req.body.picture)
      res.json(user)
    } catch (e) {
      res.status(500).json(e)
    }
  }
}

补充信息 #

• 已在Express中配置app.use(fileUpload({}))
• 用Postman测试接口完全正常，但前端提交时，图片数据跑到req.body里，req.files还是null
• payload.picture是AntD Upload组件返回的对象，其中file是原生File实例
• 前端请求后，服务器打印的req.body里picture字段是JSON字符串，req.files为null；Postman请求时，req.files.picture能拿到文件，req.body正确返回其他表单字段

解决方案 #

核心问题是前端错误地把File对象转成了JSON字符串。express-fileupload只会识别FormData中原生File/Blob类型的字段作为文件，JSON字符串会被当成普通表单数据放到req.body里。

修改前端代码，直接传入File实例，不要用JSON.stringify处理：

function* workCreateUser({ payload }: PayloadAction<ICreateUser>): any {
  let formData = new FormData()
  
  // 直接传入原生File实例，无需转JSON
  formData.append('picture', payload.picture.file)
  formData.append('login', payload.login)
  formData.append('name', payload.name)
  formData.append('color', payload.color)
 
  const response = yield call(() =>
    fetch(`${URL_SERVER}api/users`, {
      method: 'POST',
      body: formData,
      // 无需手动设置Content-Type，fetch会自动生成带boundary的正确头部
    })
  )
}

修改后，后端就能通过req.files.picture获取上传的文件，req.body也能正确拿到login、name、color等字段。

额外注意：

• 不要手动给fetch设置Content-Type: multipart/form-data，FormData会自动生成包含boundary的正确请求头，手动设置会丢失boundary，导致后端无法解析文件
• 确认payload.picture.file确实是原生File对象（根据你的描述，这一点是满足的）

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