### 前端实现 在 `element-ui-plus` 中，可以通过自定义事件处理函数来实现不使用 `FormData` 的方式将表单内容和附件一同发送到后端。以下是具体实现： #### HTML 部分 ```html <el-form ref="formRef" :model="formData"> <el-form-item label="名称"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="描述"> <el-input v-model="formData.description"></el-input> </el-form-item> <el-upload :auto-upload="false" multiple :file-list="fileList" :on-change="handleChange" :on-remove="handleRemove" > <el-button size="small">选择文件</el-button> </el-upload> <el-button type="primary" @click="handleSubmit">提交</el-button> </el-form> ``` #### JavaScript 部分 ```javascript export default { data() { return { formData: { name: '', description: '' }, fileList: [] }; }, methods: { handleChange(file, fileList) { this.fileList = fileList.map(item => item.raw); // 将文件对象存储为数组 }, handleRemove(file, fileList) { this.fileList = fileList.map(item => item.raw); }, handleSubmit() { const filesData = {}; this.fileList.forEach((file, index) => { filesData[`file${index}`] = file; // 将每个文件作为独立字段 }); const postData = Object.assign({}, this.formData, filesData); axios.post('/api/upload', JSON.stringify(postData), { headers: { 'Content-Type': 'application/json' } }).then(response => { console.log('上传成功:', response.data); }).catch(error => { console.error('上传失败:', error); }); } } }; ``` --- ### 后端 Java 实现 在后端部分，Java 使用 Spring Boot 提供的控制器可以解析接收到的数据并保存。 #### 控制器代码 ```java import org.springframework.web.bind.annotation.*; import java.util.Map; @RestController @RequestMapping("/api") public class UploadController { @PostMapping("/upload") public Map<String, String> upload(@RequestBody Map<String, Object> requestBody) { System.out.println("接收到的数据:"); requestBody.forEach((key, value) -> { if (value instanceof byte[]) { byte[] fileBytes = (byte[]) value; saveFile(key, fileBytes); // 调用方法保存文件 } else { System.out.println(key + ": " + value.toString()); } }); return Map.of("status", "success"); } private void saveFile(String fileName, byte[] content) { try { Files.write(Paths.get("./uploads/" + fileName), content); System.out.println(fileName + " 已保存至 ./uploads/"); } catch (IOException e) { e.printStackTrace(); } } } ``` --- ### 关键点说明 1. **前端数据结构转换** 文件被逐一分解成多个字段（如 `file0`, `file1`），并与表单其他字段合并形成最终的对象[^1]。 2. **JSON 数据传输** 所有数据通过 JSON 格式传递给后端，避免了传统 `multipart/form-data` 方式的复杂性[^3]。 3. **后端文件处理** 如果文件是以字节数组的形式接收，则需手动将其写入磁盘或其他存储介质[^4]。 --- ###