SpringBoot 多文件上传：前端文件选择器与后端接收

在前端，可以使用 <input type='file' multiple> 来实现文件选择器选择多个文件。

在后端，可以使用 MultipartHttpServletRequest 来接收多个文件。具体步骤如下：

在 SpringBoot 中引入依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

在 Controller 中定义接收文件的方法：

@PostMapping("/upload")
public String uploadFiles(MultipartHttpServletRequest request) {
    List<MultipartFile> files = request.getFiles("file");
    // 处理上传的文件
    return "success";
}

其中，MultipartHttpServletRequest 是 Spring 提供的用于接收文件上传的对象，通过 getFiles("file") 方法获取上传的文件列表。

在前端使用 FormData 来发送文件：

var formData = new FormData();
var files = document.getElementById("fileInput").files;
for (var i = 0; i < files.length; i++) {
    formData.append("file", files[i]);
}
$.ajax({
    url: "/upload",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function (data) {
        console.log(data);
    }
});

其中，formData.append("file", files[i]) 用于向 formData 中添加文件，而 processData 和 contentType 需要设置为 false，以便让浏览器自己处理表单数据。