使用Axios+FormData上传文件和JSON至Node服务端，解析异常求助

这个问题的核心原因很直白：你直接把JSON对象传给FormData.append()时，它会默认调用对象的toString()方法，结果就是毫无意义的字符串'[object Object]'——这根本不是有效的JSON格式，所以后端用JSON.parse()解析时自然会报错。

下面是具体的解决步骤，分前后端两部分说明：

前端修改：将JSON对象转为字符串后再存入FormData #

你需要先把formData这个JSON对象序列化为标准的JSON字符串，再添加到FormData中，这是关键修复点：

let data = new FormData();
// 处理文件（如果是单个文件直接传递即可，多个文件的话需要循环append）
data.append("file", this.state.files);
// 核心操作：把JSON对象转成字符串再存入FormData
data.append("data", JSON.stringify(formData));

修改后，后端拿到的data字段就是有效的JSON字符串（比如'{"a":123}'），而不是没用的'[object Object]'了。

后端（Node.js）处理：正确解析FormData并转换JSON字符串 #

注意：因为你发送的是包含文件的multipart/form-data类型请求，所以不能用普通的express.json()中间件，必须用multer来解析FormData。

1. 先安装multer（如果还没装的话） #

npm install multer

2. 后端代码示例（基于Express框架） #

const express = require('express');
const multer = require('multer');
const app = express();

// 配置multer，这里用内存存储（也可以根据需求配置磁盘存储）
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 处理PUT请求，用upload.any()解析所有FormData字段（包括文件和data）
app.put('/your-api-path', upload.any(), (req, res) => {
  try {
    // 把JSON字符串解析回对象
    const parsedData = JSON.parse(req.body.data);
    // 现在可以正常访问对象属性了
    console.log(parsedData.a); // 输出123

    // 处理上传的文件：req.files里是所有上传文件的列表
    const uploadedFile = req.files.find(file => file.fieldname === 'file');
    console.log('上传文件信息:', uploadedFile);

    res.status(200).json({ message: '解析成功', data: parsedData });
  } catch (err) {
    console.error('解析出错:', err);
    res.status(400).json({ error: '数据解析失败' });
  }
});

app.listen(3000, () => console.log('服务运行在3000端口'));

为什么之前会报错？ #

你后端拿到的req.body.data是'[object Object]'，当JSON.parse()尝试解析这个字符串时，解析器看到第一个字符是[，紧接着是o，但JSON规范里数组开头后只能是{、[或合法值类型，所以会抛出SyntaxError: Unexpected token o in JSON at position 1的错误——本质就是你传递的不是有效的JSON字符串。

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