React+Axios传头像时带userid/username致req.files为null的解决办法

问题场景 #

前端使用React+Axios，后端基于Express+express-fileupload实现更换头像功能，需要同时传递用户选择的图片（FormData格式）和userid、username到后端以识别请求发起者。但将userid、username与FormData打包成对象发送时，后端req.files会变为null；仅传递FormData时能正常获取图片，却拿不到用户信息。

错误原因 #

核心问题在于你错误地将FormData嵌套在普通对象中发送，而multipart/form-data格式要求所有字段（包括普通文本参数）都必须通过FormData.append()方法添加到FormData实例里，不能通过嵌套对象的方式传递。

解决方案 #

前端修正代码 #

直接把userid和username追加到FormData实例中，再将该实例作为请求体发送：

async function uploadProfilePicture(e) {
  const file = e.target.files[0];
  const formdata = new FormData();
  
  // 追加图片文件
  formdata.append("file", file);
  // 追加用户信息字段
  formdata.append("userid", 1);
  formdata.append("username", "Admin");

  try {
    const response = await Axios.post('/user/editavatar', formdata, {
      // 可选：Axios会自动识别FormData并设置正确的Content-Type（含boundary）
      // headers: { 'Content-Type': 'multipart/form-data' }
    });
    console.log("Picture changed!");
    return true;
  } catch (error) {
    console.log(error);
    return false;
  }
}

后端处理代码 #

确保正确配置express-fileupload中间件，之后直接从req.body获取用户信息，从req.files获取上传文件：

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

// 配置express-fileupload中间件（默认配置即可）
app.use(fileUpload());

app.post('/user/editavatar', (req, res) => {
  // 从req.body获取用户信息
  const { userid, username } = req.body;
  // 从req.files获取上传的图片
  const uploadedFile = req.files?.file;

  if (!uploadedFile) {
    return res.status(400).json({ error: '未上传图片' });
  }

  // 后续业务逻辑：比如将图片保存到服务器、更新用户头像路径到数据库
  // uploadedFile.mv('/指定存储路径/文件名', (err) => { ... });

  res.json({ message: '头像更新成功' });
});

关键注意事项 #

• 无需手动设置Content-Type：Axios会自动根据FormData实例生成包含boundary分隔符的正确multipart/form-data请求头，手动设置可能导致后端解析失败。
• 确认后端中间件启用：必须确保express-fileupload中间件已正确挂载到Express实例中，否则无法解析FormData中的文件和参数。

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