Netlify函数处理React应用提交的Form-data返回非结构化字符串问题求助

我完全懂你现在的困扰——提交form-data到Netlify函数后，拿到的是一堆带boundary的杂乱字符串，用JSON.parse直接解析肯定报错，因为这根本不是JSON格式！别慌，form-data属于multipart类型，得用专门的工具来解析，下面是一步步的解决方案：

1. 为什么JSON.parse行不通？ #

你看到的控制台输出是multipart/form-data的原始格式，这种格式是用来传输表单数据（包括文件）的，它用boundary字符串分隔各个字段，和JSON的结构完全不同，所以JSON.parse自然无法识别。

2. 使用Formidable解析Form-Data #

Formidable是Node.js生态里处理multipart数据的常用工具，我们可以用它把原始字符串转成结构化的对象。

第一步：安装Formidable #

在你的Netlify函数项目根目录执行：

npm install formidable

第二步：修改Netlify Handler函数 #

把你的handler改成下面这样，用Formidable解析请求体：

const formidable = require('formidable');

exports.handler = async function (event, context) {
  // 只处理POST请求
  if (event.httpMethod !== 'POST') {
    return { statusCode: 405, body: 'Method Not Allowed' };
  }

  // 用Promise包装Formidable的回调逻辑，适配Netlify的async函数
  return new Promise((resolve, reject) => {
    const form = formidable({ multiples: false }); // 不需要多文件上传就设为false

    // Netlify传递的event.body是base64编码的，先转成Buffer再解析
    form.parse(Buffer.from(event.body, 'base64'), (err, fields, files) => {
      if (err) {
        return resolve({
          statusCode: 500,
          body: JSON.stringify({ error: '解析表单数据失败' })
        });
      }

      // 现在fields就是你想要的结构化对象了！
      console.log('解析后的字段：', fields);
      // 可以直接解构使用
      const { name, caption, description, category, ofClass, endanger } = fields;

      // 在这里写你的数据库存储逻辑，比如：
      // await db.collection('your-collection').insertOne({ name, caption, ... });

      resolve({
        statusCode: 200,
        body: JSON.stringify({ message: '数据保存成功', data: fields })
      });
    });
  });
};

3. 调整React端的请求代码 #

你当前的addData函数里加了headers: { Accept: "application/json" }，虽然这个头本身没问题，但浏览器会自动为FormData请求设置正确的Content-Type（包含自动生成的boundary），所以不需要手动设置任何Content-Type头，建议去掉多余的配置：

export const addData = async(bodyFormData) => { 
  try {
    const result = await fetch('/.netlify/functions/addData', { 
      method: 'POST', 
      body: bodyFormData 
    });
    const responseData = await result.json();
    console.log(responseData);
    return responseData;
  } catch (error) {
    console.error(error);
    throw error; // 抛出错误让上层组件捕获处理
  }
}

4. 测试验证 #

部署修改后的Netlify函数，提交表单后，在Netlify的函数日志里就能看到解析后的fields对象，结构清晰，直接就能用来存入数据库了。

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