### 前端使用 FormData 向后端传递参数的实现方式 当需要从前端向后端传输文件时，可以利用 JavaScript 的 `FormData` 对象来构造请求数据。对于特定场景下的接口设计——即后端期望接收到的形式为 `@RequestPart Map<String, MultipartFile[]> allFiles` ——前端应按照一定的规则填充并提交数据。 #### 构建 FormData 数据 在前端代码中，可以通过循环遍历文件列表并将它们附加到对应的键下。以下是一个完整的示例： ```javascript function uploadFiles() { const formData = new FormData(); // 获取所有的文件输入框 const fileInputs = document.querySelectorAll('input[type="file"]'); fileInputs.forEach(input => { if (input.files.length === 0) return; Array.from(input.files).forEach((file, index) => { // 将文件添加至 FormData 中，并按组分类 formData.append(`${input.name}[${index}]`, file); }); }); fetch('/upload/endpoint', { method: 'POST', body: formData, }) .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.error('Error:', error)); } ``` 在这个脚本里，每组文件被赋予了一个数组形式的名字（例如 `"images[0]"`, `"documents[1]"`），以便于后端能够解析成所需的 `Map<String, MultipartFile[]>` 结构[^4]。 #### 关联后端逻辑 假设后端已经定义好了接受该类型参数的方法，就像这样： ```java @PostMapping("/upload/endpoint") public ResponseEntity<?> handleFileUpload(@RequestPart Map<String, MultipartFile[]> allFiles) { allFiles.forEach((key, filesArray) -> { Arrays.stream(filesArray).forEach(file -> { try { log.info("Processing {} with size {}", file.getOriginalFilename(), file.getSize()); } catch (IOException e) { throw new RuntimeException(e); } }); }); return ResponseEntity.ok().build(); } ``` 这段代码会迭代每一个由前端发来的文件分组，并打印出基本信息作为调试用途[^5]。 --- ### 注意事项 - **命名一致性**：确保前后端使用的键名称完全一致；否则可能导致匹配不上或丢失某些上传项。 - **浏览器兼容性测试**：尽管现代主流浏览器普遍支持 `FormData` API ，但在开发过程中仍需验证目标用户的设备环境是否满足要求。 - **错误处理机制**：无论是网络中断还是服务器内部异常都可能发生，因此建议加入充分的容错措施以提升用户体验。