React Redux+Spring Boot下FormData传含文件嵌套对象后端接收异常

• 现有FormData拼接逻辑只处理了第一层字段，直接append嵌套对象、数组时，JS会默认将对象转为"[object Object]"字符串、数组转为逗号拼接的单字符串，Spring的@ModelAttribute无法识别这种格式的内容，自然绑定不到嵌套实体
• 手动在请求头里写死boundary=<calculated when request is sent>是错误写法：multipart请求的boundary值必须和请求体里的分隔符完全一致，手动写固定值会导致后端解析请求失败，这个值应该由浏览器自动生成。

前端部分修改 #

1. 修正请求头配置
   删掉原有config里写死的boundary内容，不需要手动指定完整content-type，Axios检测到传入的是FormData实例时，会自动生成带正确boundary的请求头，配置简化为：

   const config = {
       headers: {
           'Content-Type': 'multipart/form-data'
       }
   }
   

2. 替换原有FormData生成逻辑，用递归方式序列化嵌套结构，字段名严格匹配Spring @ModelAttribute的绑定规则：嵌套对象用父字段名.子字段名格式，数组用字段名[下标]格式，代码如下：

   const createFormData = (data, formData = new FormData(), parentKey = '') => {
     // 处理空值
     if (data === null || data === undefined) {
       if (parentKey) formData.append(parentKey, '');
       return formData;
     }
     // 处理基础类型、文件对象
     if (typeof data !== 'object' || data instanceof File || data instanceof Blob) {
       formData.append(parentKey, data);
       return formData;
     }
     // 处理数组
     if (Array.isArray(data)) {
       data.forEach((item, index) => {
         createFormData(item, formData, `${parentKey}[${index}]`);
       })
       return formData;
     }
     // 处理普通对象
     Object.keys(data).forEach(key => {
       // 跳过不需要传给后端的预览URL字段
       if (key === 'profilePicURL') return;
       const fullKey = parentKey ? `${parentKey}.${key}` : key;
       createFormData(data[key], formData, fullKey);
     })
     return formData;
   };
   

   调用的时候直接const data = createFormData(contact);即可，不需要额外处理。
   几个适配细节：
   • 布尔类型字段（比如favorite）直接传布尔值，FormData会自动转成"true"/"false"字符串，Spring可以自动转换为boolean类型
   • 日期字段按照后端@DateTimeFormat指定的dd/MM/yyyy格式传字符串即可正常绑定
   • 图片字段profilePic直接存用户选择的File对象，未选择图片时可以传null，不要传空字符串
   • 嵌套对象比如telephoneNumber、country、socialLinks会被序列化为telephoneNumber.code、country.name这类带点的字段名，刚好匹配Spring的嵌套属性绑定规则
   • 数组类型的tags会被序列化为tags[0]、tags[1]格式，可直接绑定到后端String[]类型字段

后端部分调整 #

现有代码的绑定逻辑基本可用，只需要注意几个细节：

• 所有嵌套关联的实体类（ContactTelephoneNumber、ContactCountryName、ContactSocialLinks）必须保留无参构造方法，用Lombok的@Data、@NoArgsConstructor注解已经满足要求，Spring实例化嵌套对象时依赖无参构造
• 图片字段可以不用单独拆@RequestParam接收，直接在Contact实体中添加private MultipartFile profilePic;字段，@ModelAttribute会自动完成绑定，减少参数匹配出错的概率
• 现有的嵌套对象判空逻辑（判断telephoneNumber、country、socialLinks不为null时再设置关联contact）保留即可，当前端没有传对应嵌套字段时，Spring会将这些属性赋值为null，不会触发空指针
• 如果出现日期绑定失败，检查前端传入的日期字符串格式是否严格匹配dd/MM/yyyy，不要传yyyy-MM-dd格式的内容

改完之后可以在浏览器开发者工具的网络面板里查看请求载荷，能看到带点的嵌套字段、带下标的数组成员，就说明序列化格式正确，后端可以正常完成参数绑定。

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