Vue 3 axios发送表单数据

Question

我试图将照片上传到后端expressjs API。在我的Vue 3设置中，我正在创建一个formdata对象"files"并将其传递给axios，以发布到服务器。但是，服务器没有得到任何请求。文件未定义)。服务器代码通过邮差测试工作，但它不与我的Vue代码工作。下面是一些有用的代码片段:

<template>
<form @submit.prevent="onSubmit">
<FileSelector v-model="files" :accept="['image/*']">
<DialogButton>Add</DialogButton>
<PhotoPreview v-for="file in files" :key="file" :image="file"></PhotoPreview>
</FileSelector>
<button type="submit">upload</button>
</form>
</template>

setup() {
const files = ref([])
const axios = inject('axios')
const { loading, data, error, axiosPostFormData} = useApi('/photo')
const onSubmit = async () => {
try {
const formData = new FormData()
formData.append("files", files.value)
console.log(files.value)
await axiosPostFormData(formData)
} catch(e) {
console.log(e)
}
}
return {
files, onSubmit
}
}
}

Files对象显示为这个代理对象。这是正确的吗?

Proxy {0: File}
[[Handler]]: Object
[[Target]]: Array(1)
[[IsRevoked]]: false

如果我改成这个，它就可以工作了。

formData.append("files",  files.value[0])

如何发送多个文件?

Answer 1

代替单个文件的formData.append("files", files.value)，对于许多文件尝试如下:

for (const file of files.value) {
formData.append('files', file) 
}