After researching extensively on the topic, I reviewed questions such as file-upload-in-vuetify and vuetify-file-uploads, but unfortunately, the solutions provided did not work for me.
My current challenge involves utilizing Vuetify 2's <v-file-input> to upload multiple PDF files. Even though I have created a FormData object and appended all the necessary files, when I try to submit, the data does not reach my backend as expected - instead, I receive an empty object. Here is a snippet of my code:
Template:
<v-layout>
<v-flex>
<v-file-input show-size counter chips multiple label="Arquivo Geral" ref="myfile" v-model="files"></v-file-input>
</v-flex>
<v-flex>
<v-btn color="primary" text @click="submitFiles">test</v-btn>
</v-flex>
</v-layout>
Script:
data() {
return {
files: null,
}
}
methods: {
submitFiles(){
let formData = new FormData()
if(this.files){
for( let file in this.files){
formData.append("cave", file)
}
console.log(formData.getAll("cave"))
console.log(this.files)
axios.post('https://eniwp6w65oc77.x.pipedream.net/',
{
files: formData,
test: "test"
},
{
headers: {
'Content-Type': 'multipart/form-data'
}
}).then( response => {
console.log('Success!')
console.log({response})
}).catch(error => {
console.log({error})
})
}
else {
console.log('there are no files.')
}
}
}
Upon inspecting the response body and request header in requestbin:
Body:
{
"files": {},
"test": "test"
}
Header:
host: eniwp6w65oc77.x.pipedream.net
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,pt;q=0.8,gl;q=0.7
Cache-Control: no-cache
Content-Type: multipart/form-data
Origin: http://localhost:8000
Pragma: no-cache
Referer: http://localhost:8000/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36
Content-Length: 28
Connection: keep-alive