ExpressJS中能否用FormData同时传输图片与用户更新数据？

完全可以通过一次Axios请求的FormData同时完成图片上传和用户信息更新，不需要分两次请求。下面分前端、后端说明具体实现，以及你关心的细节：

前端（Axios）注意事项 #

你的示例代码有个关键问题：直接把对象{name: newName,...}append到FormData里，后端会收到字符串[object Object]，正确做法是把复杂对象转成JSON字符串再追加：

const formData = new FormData();
// 追加文件（React Native环境写法没问题；Web环境直接传File对象即可）
formData.append('file', {
  uri: file.uri,
  type: file.type,
  name: file.name,
});
// 追加用户信息：转成JSON字符串
formData.append('profileUpdate', JSON.stringify({
  name: newName,
  email: newEmail,
  age: newAge,
}));

// Axios请求（POST/PUT都支持）
await axios.put('/api/user/profile', formData, {
  // 注：Axios会自动识别FormData并设置正确的Content-Type，无需手动指定；React Native环境可能需要手动添加
  headers: {
    'Content-Type': 'multipart/form-data',
  },
});

后端（Express）分离接收数据 #

Express默认无法处理multipart/form-data类型的请求，需要用multer中间件处理文件上传，同时解析其他表单字段：

1. 先安装依赖：npm install multer
2. 配置与路由示例：

const express = require('express');
const multer = require('multer');
const router = express.Router();

// 配置multer：指定文件存储路径（也可以用内存存储）
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploads/'); // 确保项目根目录下的uploads文件夹已创建
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname); // 避免文件名重复
  },
});
const upload = multer({ storage: storage });

// 处理PUT请求：upload.single('file')对应前端的file字段
router.put('/profile', upload.single('file'), (req, res) => {
  // 1. 获取上传的文件信息
  const uploadedFile = req.file; // 包含文件路径、大小、类型等元数据
  // 2. 解析用户信息：把JSON字符串转回对象
  const profileUpdate = JSON.parse(req.body.profileUpdate);
  const { name, email, age } = profileUpdate;

  // 后续可执行文件存储、数据库更新等逻辑
  res.status(200).json({
    message: '文件与信息更新成功',
    uploadedFileName: uploadedFile.filename,
    updatedUserInfo: { name, email, age }
  });
});

关于PUT/POST的FormData中传递主体数据 #

完全可以单独传递主体数据——FormData本质就是键值对集合，除了文件类型的字段，其他字段都是普通主体数据：

• 简单类型（字符串、数字）：直接formData.append('age', newAge)，后端通过req.body.age直接获取
• 复杂对象：转成JSON字符串再传递，后端解析后使用，就像上面的profileUpdate字段处理方式

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