React组件通过Axios传图片与文本至API时文件转字符串问题求助

你的问题核心在于FormData不支持直接传递数组，以及后端multer中间件的字段名不匹配，导致文件被转成了无效字符串。下面是具体的修复步骤：

1. 修正React端的FormData构建逻辑 #

你之前直接把整个图片数组imgsArrayappend到FormData的images字段，FormData会自动把数组转为字符串（也就是你看到的[object File],[object File],[object File]）。正确的做法是逐个添加文件，并且使用相同的字段名：

export const addProject = (name, imgs) => {
  const formData = new FormData();
  formData.append("name", name);
  
  // 遍历所有文件，逐个添加到FormData中，字段名统一用"images"
  Object.values(imgs).forEach(img => {
    formData.append("images", img);
  });

  // 可选：打印FormData内容确认（需要展开成数组查看）
  console.log([...formData]);
  
  return axios.post('/api/addProject', formData, {
    headers: {'Content-Type': 'multipart/form-data'}
  });
}

小提示：axios在发送FormData时，其实可以省略手动设置Content-Type——axios会自动检测FormData类型，并添加正确的请求头（包括boundary分隔符），避免手动设置可能出现的错误。

2. 修正后端的multer中间件配置 #

你当前用的是upload.array('file')，但前端传递的文件字段名是images，两者不匹配，导致multer无法正确解析文件。需要把中间件的字段名改成和前端一致的images：

// 先确保multer的基础配置（示例）
const multer = require('multer');
// 这里可以自定义存储路径或存储方式，比如临时存在uploads目录
const upload = multer({ dest: 'uploads/' });

router.post('/addProject', upload.array('images'), (req, res) => {
  // 上传的文件数组会被multer解析到req.files中
  console.log(req.files); 
  // 普通文本字段（比如name）会在req.body里
  console.log(req.body.name);

  // 后续的业务逻辑...
});

关键原理说明 #

• FormData的append方法接收数组时，会默认调用数组的toString()方法，把数组转为逗号分隔的字符串，这就是你后端拿到[object File]字符串的原因。
• multer的upload.array(fieldName)需要前端用相同的fieldName逐个上传文件，这样multer才能把这些文件收集成数组，存储在req.files中，而不是req.body里——之前你在req.body.images里找文件是错误的，文件根本不会出现在req.body中。

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