vue提交MultipartFile[]
时间: 2023-11-09 19:59:41 浏览: 90
多文件上传MultipartFile
在Vue中提交MultipartFile[],我们可以使用FormData对象来处理。首先在表单中添加一个文件上传input,然后在提交表单时,通过JavaScript代码将文件信息添加到FormData对象中,然后再通过axios等库将FormData对象发送到服务端即可。
以下是一个示例代码:
```
<template>
<div>
<form @submit.prevent="submitForm">
<input type="file" multiple ref="fileInput">
<button type="submit">提交</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
methods: {
async submitForm() {
const formData = new FormData()
const files = this.$refs.fileInput.files
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i])
}
await axios.post('/api/upload', formData)
}
}
}
</script>
```
在上述代码中,我们使用了FormData对象,并通过循环将每个文件添加到该对象中,并且设置了input的“multiple”属性以支持多个文件上传。在提交表单时,我们使用axios库向服务端发送了FormData对象。
阅读全文