如何在 Spring Boot 中正确提交包含多文件的嵌套对象列表_技术教程

本文详解如何通过 thymeleaf 表单正确提交含 `multipartfile` 字段的嵌套对象列表（如 `list`），重点解决因 `ajax-form="true"` 干扰导致文件上传失败、控制器报“current request is not a multipart request”的典型问题。

在基于 Spring Boot + Thymeleaf 的文件上传场景中，动态添加含 MultipartFile 的嵌套对象（如楼层图片与编号配对）是常见需求。你已正确实现了前端动态生成表单项、为每个和文本框设置符合 Spring 数据绑定规范的 name 属性（如 images[0].floorImage 和 images[0].floorNumber），后端 DTO 结构（UploadFormDto → List → MultipartFile floorImage）也完全匹配 Spring MVC 的嵌套属性绑定机制——但文件始终为空？关键原因往往藏在表单的“隐形开关”里。

✅ 核心问题定位：ajax-form="true" 是罪魁祸首

Thymeleaf 的 ajax-form="true" 属性会自动将表单提交转为 AJAX 请求（使用 XMLHttpRequest），而 原生 AJAX 默认不支持 multipart/form-data 编码上传文件（尤其当 FormData 未显式构造时）。即使你在

标签，彻底删除 ajax-form="true" 属性，并确保显式声明 enctype：

此时你的 JavaScript 逻辑（submitImages() 中动态设置 name 属性）即可生效：

floorInput.setAttribute("name", "images[" + i + "].floorNumber");
imageInput.setAttribute("name", "images[" + i + "].floorImage");

Spring 会自动将 images[0].floorImage, images[1].floorImage 等绑定到 List 中对应元素的 MultipartFile 字段。

⚠️ 关键注意事项

enctype="multipart/form-data" 是强制要求：没有它，文件字段永远无法发送。Thymeleaf 不会自动添加此属性，必须手动声明。
不要混合 AJAX 与原生文件上传：若需异步体验，应改用 FormData + fetch/axios 手动构建请求（见下方示例），而非依赖 ajax-form。
服务端配置检查：确保 application.yml 中已配置 spring.servlet.multipart.*（如 max-file-size, max-request-size），避免大文件被拦截：
```
spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB
```
DTO 命名严格匹配：UploadData 中的字段名（floorImage, floorNumber）必须与 name 属性中的路径完全一致（大小写敏感），且 UploadFormDto 的 getter/setter 需为标准 JavaBean 规范。

? 进阶：如需 AJAX 提交（推荐方案）

若必须异步提交，应放弃 ajax-form，改用现代 JS 方式：

function submitImages() {
  const formData = new FormData();
  const rows = document.querySelectorAll('#tableBody tr');

  rows.forEach((row, index) => {
    const floorInput = row.querySelector('.floorNumber');
    const imageInput = row.querySelector('.imageData');

    if (floorInput && imageInput && imageInput.files.length > 0) {
      formData.append(`images[${index}].floorNumber`, floorInput.value);
      formData.append(`images[${index}].floorImage`, imageInput.files[0]); // 注意：files[0]
    }
  });

  fetch(`/hotels/${hotelId}/edit`, {
    method: 'POST',
    body: formData, // 自动设置 multipart Content-Type
  })
  .then(response => response.text())
  .then(html => {
    // 更新页面或跳转
  });
}

✅ 总结

问题现象	根本原因	解决动作
MultipartFile 字段为 null，报 “not a multipart request”	ajax-form="true" 强制 AJAX 提交，破坏 multipart/form-data 流程	立即移除 ajax-form="true"，保留 enctype="multipart/form-data"

只要确保表单是原生提交、enctype 正确、name 属性符合嵌套索引格式，Spring 就能完美绑定 List。记住：文件上传与 AJAX 天然不兼容，除非你亲手用 FormData 构造请求。