Vue3/Axios上传FormData至Node.js(Multer)返回[object FormData]如何解决

当前代码存在4个核心错误，直接导致Multer无法解析请求：

• Axios请求体传参错误：将formData包裹在普通对象{ formData }中发送，Axios会对普通对象做JSON序列化，最终服务端收到的是序列化后的字符串[object FormData]，并非标准multipart格式的请求体。
• 文件取值逻辑错误：images[i].file[0]本身就是File类型对象，额外调用Array.from()会将File对象转为无效数组，Multer无法识别非File类型的文件字段。
• 请求头配置错误：手动硬编码Content-Type: multipart/form-data会丢失multipart协议必须的boundary分隔符，Multer无法靠分隔符拆分文件和普通字段。
• 后端路由存在语法错误：路由回调函数的括号位置错误，会直接导致服务运行报错。

前端Vue3侧Axios请求 #

async post(images) {
  const formData = new FormData();
  for (let i = 0; i < images.length; i++) {
    // 直接取FileList中的原生File对象，移除多余的Array.from转换
    const file = images[i].file[0];
    formData.append("file", file);
    formData.append("title", images[i].title);
    formData.append("project", images[i].project);
    formData.append("date", images[i].date);
  }
  const isValid = true;
  if (isValid) {
    const res = await axios
      .post(
        `http://localhost:3080/api/image/post`,
        // 直接传递formData实例，不要包裹在普通对象中
        formData,
        {
          headers: {
            // 移除硬编码的Content-Type，自动生成带boundary的合法请求头
            ...formData.getHeaders()
          },
        }
      )
      .catch((err) => {
        console.error("上传请求失败", err);
        return null;
      });
    console.log("请求返回结果", res);
  }
}

如果你需要上传多组「文件+对应字段」的关联数据，可以在append字段时加上索引后缀，例如formData.append(file_${i}, file)、formData.append(title_${i}, images[i].title)，避免同名字段生成数组后匹配错位。

后端Node.js侧Multer配置 #

const multer  = require('multer')
const storage = multer.diskStorage({
  destination: function (request, file, callback) {
      callback(null, './uploads/');
  },
  filename: function (request, file, callback) {
      callback(null, file.originalname)
  }
});
const upload = multer({ storage: storage });

// 修正路由回调的语法错误
app.post('/api/image/post', upload.array('file'), function (req, res, next) {
  console.log("解析到的文件列表：", req.files);
  console.log("解析到的普通字段：", req.body);
  res.json({code: 0, msg: "上传成功"})
})

代码修正后重启服务发起请求，服务端控制台将正常输出：

• req.files为上传的文件数组，包含文件存储路径、原始文件名、大小等信息
• req.body中可直接读取到title、project、date字段的值，不会再出现[object FormData]的异常字符串

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