axios post file in vuejs return null - vue.js

Question

I've been trying to post a file with axios to my database.
<template>
<div>
<v-file-input
v-model="file"
label="File input"
id="file"
ref="file"
>
</v-file-input>
<button v-on:click="submitFile()">Submit</button>
</div>
</template>
export default {
name: "Test",
data() {
return {
file: null,
}
},
methods: {
submitFile() {
let formData = new FormData();
formData.append('file', this.file);
axios.post('https://test_file_create/', formData).then(function() {
console.log('SUCCESS!!');
}).catch(function() {
console.log('FAILURE!!');
});
},
},
}
but the problem is in my database i got my file column null it seems it can't post the file although it return "SUCCESS!!" in submitFile function.
can someone please tell me how to solve this problem.

Answer 1

You've made a couple of mistakes here so from most severe to least...
The <v-file-input> component binds the selected file to its model but you are using the handleFileUpload() method to set your file property to the component itself (via $refs).
Try this instead, using v-model with your file property initialised to null instead of an empty string (which doesn't make sense for a File object)
<v-file-input
v-model="file"
label="File input"
id="file"
ref="file"
></v-file-input>
export default {
name: "Test",
data: () => ({ file: null }),
// etc
}
When sending a FormData instance from the browser, do not manually add the content-type header. FormData also requires special mime-boundary tokens which should be handled automatically
axios.post("https://test_file_create/", formData).then(res => ...)
You should only have one root element in your template. <div> is a popular choice
<template>
<div>
<v-file-input
v-model="file"
label="File input"
id="file"
ref="file"
></v-file-input>
<button :disabled="!file" type="button" #click="submitFile">Submit</button>
</div>
</template>