multipartfile多文件上传,前端传一个类
时间: 2023-12-10 19:38:42 浏览: 33
如果要实现前端一次性上传多个文件,并且这些文件需要绑定到一个类中,可以按以下步骤进行:
1. 在前端构建一个表单,表单中包含一个文件选择器和一个提交按钮。
2. 通过 JavaScript 监听文件选择器的 change 事件,获取用户选择的文件列表。
3. 将文件列表封装成一个 FormData 对象,并以 POST 方法发送给后端。
4. 后端接收到请求后,解析 FormData 对象,从中获取多个文件,并将这些文件绑定到一个类中。
下面是一个示例代码:
前端代码:
```html
<form id="myForm">
<input type="file" name="files" multiple>
<button type="submit">Upload</button>
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(form);
fetch('/upload', { method: 'POST', body: formData });
});
</script>
```
后端代码(使用 Spring MVC):
```java
@PostMapping("/upload")
public void upload(@RequestParam("files") MultipartFile[] files) {
// 将文件绑定到一个类中
// ...
}
```
在后端中,可以将多个文件绑定到一个类中,例如:
```java
public class MyFileClass {
private List<MultipartFile> files;
// ...
}
```
然后在上传方法中使用 `@ModelAttribute` 注解,将表单数据绑定到 MyFileClass 对象中:
```java
@PostMapping("/upload")
public void upload(@ModelAttribute MyFileClass myFile) {
List<MultipartFile> files = myFile.getFiles();
// ...
}
```