Thymeleaf动态表单提交MultipartFile失败问题排查

问题描述 #

在Thymeleaf页面向Spring控制器提交动态生成的表单时，遇到两个核心问题：

• 动态添加的表单行中，floorNumber字段能正确绑定到List<UploadData>，但MultipartFile类型的floorImage始终无法传递。
• 为表单添加enctype='multipart/form-data'后，控制器抛出错误：Current request is not a multipart request。

相关代码片段 #

1. 动态添加表单行的JS函数 #

function addNewRow(){    
    let row = document.createElement("tr");    
    let data = document.createElement("td");    
    let floorData = document.createElement("td");    
    let imageData = document.createElement("td");    
    let floorInput = document.createElement("input");    
    let imageInput = document.createElement("input");    
    row.setAttribute("id","newAdditions");    
    floorInput.setAttribute("id","floorNumber");    
    floorInput.setAttribute("type", "text");    
    floorInput.setAttribute("placeHolder", "Floor Number");    
    floorInput.setAttribute("class", "form-control floorNumber");    
    floorData.setAttribute("id", "floorNumberData")    
    floorData.appendChild(floorInput);    
    imageInput.setAttribute("type","file");    
    imageInput.setAttribute("accept","image/*");    
    imageInput.setAttribute("id","imageData");    
    imageInput.setAttribute("class","imageData");    
    imageData.appendChild(imageInput);    
    row.appendChild(data);    
    row.appendChild(floorData);    
    row.appendChild(imageData);    
    document.getElementById("tableBody").appendChild(row);  
}

2. 表单提交JS函数 #

function submitImages(){    
    let allItems = document.querySelectorAll('[id=newAdditions]');    
    for(let i = 0; i < allItems.length; i++){      
        let floor = allItems[i].getElementsByClassName('floorNumber');      
        let image = allItems[i].getElementsByClassName('imageData');      
        floor[0].setAttribute("name", "images[" + i +"].floorNumber");      
        image[0].setAttribute("name", "images[" + i +"].floorImage");    
    }    
    $('#floorForm').submit();  
}

3. DTO类 #

public class UploadFormDto{    
    private List<UploadData> images;    
    private Long id;    
    // getters & setters
}

public class UploadData{    
    private MultipartFile floorImage;    
    private String floorNumber;    
    // getters & setters
}

4. 控制器方法 #

@PostMapping(value = "/edit") 
@Transactional 
public String handleEditHotelRooms(@ModelAttribute("editForm") UploadFormDto editForm,  
                                   @PathVariable("hotelId") Hotel hotel,  
                                   BindingResult result, RedirectAttributes redirectAttributes) throws WebActionException {
    // 业务逻辑
}

问题根源与修复方案 #

1. 表单enctype属性配置错误 #

文件上传必须依赖multipart/form-data编码，但该属性必须直接定义在<form>标签上，浏览器不会读取JS动态添加的enctype属性。修改Thymeleaf表单标签：

<form id="floorForm" th:action="@{/edit/{hotelId}(hotelId=${hotel.id})}" method="post" enctype="multipart/form-data">

2. 控制器未声明支持Multipart请求 #

Spring控制器需要明确声明接收multipart/form-data类型的请求，在@PostMapping中添加consumes属性，并修正路径与@PathVariable的匹配问题：

import org.springframework.http.MediaType;

@PostMapping(value = "/edit/{hotelId}", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
@Transactional
public String handleEditHotelRooms(@ModelAttribute("editForm") UploadFormDto editForm,
                                   @PathVariable("hotelId") Hotel hotel,
                                   BindingResult result,
                                   RedirectAttributes redirectAttributes) throws WebActionException {
    // 业务逻辑
}

3. 动态元素ID重复问题 #

原代码中所有动态行和输入框的ID完全重复，可能导致DOM选择器异常，建议生成唯一ID：

function addNewRow(){
    const rowIndex = document.querySelectorAll('[id^="newAdditions-"]').length;
    let row = document.createElement("tr");
    row.setAttribute("id", `newAdditions-${rowIndex}`); // 唯一行ID
    
    let floorInput = document.createElement("input");
    floorInput.setAttribute("id", `floorNumber-${rowIndex}`); // 唯一输入框ID
    // 其他属性保持不变...
    
    let imageInput = document.createElement("input");
    imageInput.setAttribute("id", `imageData-${rowIndex}`); // 唯一文件框ID
    // 其他属性保持不变...
    
    // 剩余代码保持不变
}

提交函数改用类选择器匹配元素，避免ID冲突：

function submitImages(){
    let allItems = document.querySelectorAll('[id^="newAdditions-"]');
    for(let i = 0; i < allItems.length; i++){
        let floor = allItems[i].querySelector('.floorNumber');
        let image = allItems[i].querySelector('.imageData');
        floor.setAttribute("name", `images[${i}].floorNumber`);
        image.setAttribute("name", `images[${i}].floorImage`);
    }
    $('#floorForm').submit();
}

4. 检查Spring Multipart全局配置 #

如果是Spring Boot项目，确保application.properties中Multipart配置正常（默认配置已满足基本需求，可按需调整）：

spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

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