List<MultipartFile>前端怎么传
时间: 2023-08-10 22:14:34 浏览: 158
vue使用el-upload上传文件及Feign服务间传递文件的方法
前端可以使用`FormData`对象来传递`List<MultipartFile>`类型的文件数据。具体的实现步骤如下:
1. 在HTML中定义一个表单,使用`enctype="multipart/form-data"`属性来支持上传文件。
```html
<form id="myForm" enctype="multipart/form-data">
<input type="file" name="files" multiple>
<button type="submit">Submit</button>
</form>
```
2. 使用JavaScript获取表单对象,并创建`FormData`对象。
```javascript
const form = document.getElementById('myForm');
const formData = new FormData(form);
```
3. 使用`append`方法将`List<MultipartFile>`类型的文件数据添加到`FormData`对象中。
```javascript
const fileList = document.querySelector('input[type="file"]').files;
for (let i = 0; i < fileList.length; i++) {
formData.append('files', fileList[i]);
}
```
4. 使用`XMLHttpRequest`对象发送POST请求,将`FormData`对象作为请求体发送到后端。
```javascript
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
console.log('upload success');
};
xhr.send(formData);
```
这样就可以将`List<MultipartFile>`类型的文件数据传递到后端了。
阅读全文