Next.js中FormData无法正确序列化嵌套对象数组及itinerary图片传递问题

看起来你遇到了FormData处理嵌套结构和文件上传的典型问题，我来帮你梳理下问题所在和解决办法：

问题分析 #

1. 普通数组被错误序列化为字符串元素：你把language、popularFeatures等数组直接JSON.stringify后append，导致服务器拿到的是["[\"Italian\",...]"]这种嵌套了JSON字符串的数组，而非原始的字符串数组。
2. 嵌套对象数组丢失文件信息：整个itineraries数组被JSON.stringify后传递，但File对象无法被JSON序列化，会被转成空对象{}；同时你单独append的行程图片和序列化后的行程字符串无法关联，服务器没法把图片对应到正确的行程项。
3. 结构不匹配：单独上传的行程图片和整体序列化的行程数组在服务器端是分离的，无法自动对应合并。

解决方案 #

我们需要调整formatFormData的写法，针对不同类型的数据采用对应的append方式，避免JSON序列化破坏File对象的结构：

export const formatFormData = (formData) => {
  const data = new FormData();

  // 顶层普通字段直接append
  data.append("title", formData.title);
  data.append("locationName", formData.locationName);
  data.append("description", formData.description);
  data.append("price", formData.price);
  data.append("offerPrice", formData.offerPrice);
  data.append("maxCapacity", formData.maxCapacity);
  data.append("duration", formData.duration);
  data.append("groupSize", formData.groupSize);
  data.append("highlights", formData.highlights);

  // 嵌套对象：JSON序列化后传递，服务器端需再解析
  data.append("location", JSON.stringify(formData.location));
  data.append("prices", JSON.stringify(formData.prices));

  // 普通数组：循环append同一个key，FormData会自动处理为数组
  formData.language.forEach(item => data.append("language", item));
  formData.popularFeatures.forEach(item => data.append("popularFeatures", item));
  formData.included.forEach(item => data.append("included", item));
  formData.excluded.forEach(item => data.append("excluded", item));
  formData.peopleTypes.forEach(item => data.append("peopleTypes", item));

  // 嵌套对象数组（核心修改）：逐个字段关联索引append，保留File对象
  formData.itineraries.forEach((itinerary, index) => {
    data.append(`itineraries[${index}][title]`, itinerary.title);
    data.append(`itineraries[${index}][time]`, itinerary.time);
    data.append(`itineraries[${index}][description]`, itinerary.description);
    data.append(`itineraries[${index}][duration]`, itinerary.duration);
    // 单独append对应索引的行程图片
    if (itinerary.image) {
      data.append(`itineraries[${index}][image]`, itinerary.image);
    }
  });

  // 顶层图片数组：原有处理正确，循环append即可
  formData.images.forEach((image) => {
    data.append(`images`, image);
  });

  return data;
};

服务器端解析注意事项 #

以Next.js API路由为例，你需要用专门的库处理FormData（比如formidable或者multer），同时注意：

1. 对于location、prices这类JSON字符串字段，服务器端需要用JSON.parse()解析为对象。
2. 普通数组（如language）会被自动解析为字符串数组，无需额外处理。
3. itineraries会被解析为对象数组，其中image字段是完整的File对象（如果上传了图片）。
4. 若使用Next.js 13+ App Router，推荐用formidable的现代版本或next/server内置的FormData解析能力。

这样修改后，你就能在服务器端拿到结构正确的数组、嵌套对象，以及完整的File对象，不会再出现空文件和JSON字符串的问题了。

备注：内容来源于stack exchange，提问作者Almant Doko