前端使用FormData上传多个文件,后端接收

前端使用`FormData`对象上传多个文件到后端是一个常见的操作。`FormData`允许开发者将表单数据、键值对以及二进制数据（如文件）打包成一个对象，然后通过Ajax请求发送到服务器。

以下是前端JavaScript实现步骤：

1. 创建一个`FormData`实例：

let formData = new FormData();

2. 循环添加多个文件到`FormData`中：

const files = document.querySelectorAll('input[type=file]'); // 获取需要上传的文件输入元素

files.forEach((fileInput) => {
    if (fileInput.files.length > 0) { // 检查是否有文件选择
        for (let i = 0; i < fileInput.files.length; i++) {
            formData.append('files[]', fileInput.files[i]); // 使用索引数组来标记多个文件
        }
    }
});

这里假设你有多个`<input type="file">`元素供用户选择文件，并将它们作为一组上传。

3. 使用Ajax发送`FormData`：

axios.post('/api/upload', formData, {
    headers: {'Content-Type': 'multipart/form-data'} // 设置正确的Content-Type
}).then(response => {
    console.log('上传成功:', response.data);
}).catch(error => {
    console.error('上传失败:', error);
});

后端接收部分：

后端通常是Node.js（Express），Python（Flask/Django），Java（Spring Boot）等框架，关键在于设置合适的路由和处理函数来解析`multipart/form-data`类型的请求体：

@PostMapping("/upload")
public ResponseEntity<?> handleFileUpload(@RequestParam("files[]") MultipartFile[] files) throws IOException {
    // 处理文件，例如保存到服务器
    for (MultipartFile file : files) {
        saveFile(file);
    }

    return ResponseEntity.ok().build(); // 返回响应确认收到文件
}

在Node.js中，可以使用multer库处理文件上传：

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.array('files'), function (req, res, next) {
    req.files.forEach(file => {
        // 文件处理逻辑...
    });
    res.send('Files uploaded successfully!');
});