List<MultipartFile>前端Vue怎么传
时间: 2023-08-10 18:14:34 浏览: 63
在Vue中,我们可以使用`FormData`对象来传递`List<MultipartFile>`类型的文件数据。具体的实现步骤如下:
1. 在HTML中定义一个表单,使用`enctype="multipart/form-data"`属性来支持上传文件。
```html
<template>
<form @submit.prevent="submitForm" enctype="multipart/form-data">
<input type="file" ref="file" multiple>
<button type="submit">Submit</button>
</form>
</template>
```
2. 在Vue组件中,使用`FormData`对象来创建表单数据,并将`List<MultipartFile>`类型的文件数据添加到`FormData`对象中。
```javascript
<script>
export default {
methods: {
submitForm() {
const formData = new FormData();
const fileList = this.$refs.file.files;
for (let i = 0; i < fileList.length; i++) {
formData.append('files', fileList[i]);
}
// 使用axios发送POST请求,将FormData对象作为请求体发送到后端
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
}
}
}
</script>
```
这样就可以将`List<MultipartFile>`类型的文件数据传递到后端了。需要注意的是,在使用`axios`发送POST请求时,需要设置`Content-Type`为`multipart/form-data`,以告诉后端这是一个包含文件数据的请求体。