给我写一个axios传送多个文件并传输参数以及后端接收的示例,后端用springboot
时间: 2024-05-12 13:12:57 浏览: 135
axios向后台传递数组作为参数的方法
前端使用axios进行多文件上传时,需要使用`FormData`对象来构建上传数据,示例如下:
```javascript
const formData = new FormData();
formData.append('file1', file1);
formData.append('file2', file2);
formData.append('param1', 'value1');
formData.append('param2', 'value2');
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
```
在上述示例中,`file1`和`file2`是要上传的文件对象,`param1`和`param2`是要传递的参数。
后端接收多文件和参数可以使用`MultipartHttpServletRequest`对象来实现。示例如下:
```java
@PostMapping("/upload")
public String handleFileUpload(HttpServletRequest request) {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
// 处理文件上传
for (Map.Entry<String, MultipartFile> entry : fileMap.entrySet()) {
MultipartFile file = entry.getValue();
String originalFilename = file.getOriginalFilename();
// ...
}
// 处理参数
String param1 = multipartRequest.getParameter("param1");
String param2 = multipartRequest.getParameter("param2");
// ...
return "success";
}
```
在上述示例中,`MultipartHttpServletRequest`对象可以通过`HttpServletRequest`对象进行类型转换,然后使用`getFileMap()`方法获取上传的文件列表,使用`getParameter()`方法获取上传的参数。
阅读全文