I've been attempting to upload images to a backend expressjs API using Vue 3. I'm creating a FormData object named "files" and sending it via axios to the server. However, the server isn't receiving anything (req.files is undefined). The server code has been tested successfully with Postman, but it's not working with my Vue code. Here are snippets of the Vue code:
<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
}
}
}
The Files object appears as this proxy object. Is this correct?
Proxy {0: File}
[[Handler]]: Object
[[Target]]: Array(1)
[[IsRevoked]]: false
When I change it to this, it works.
formData.append("files", files.value[0])
How can I send multiple files at once?