Vue Custom input file component could not be submitted correctly - laravel-5

Question

I have a component for browsing files which I use to select the file I want to upload.
Here is my component:
<template>
<label class="file-select">
<div class="select-button">
<span v-if="value">Selected File: {{value.name}}</span>
<span v-else>Select File</span>
</div>
<input type="file" #change="handleFileChange"/>
</label>
</template>
<script>
export default {
props: {
value: File
},
methods: {
handleFileChange(e) {
this.$emit('input', e.target.files[0])
}
}
}
</script>
Here is how I used my component:
<p>Select Image: <bim-fileinput v-model="file"></bim-fileinput></p>
Here is how I submit the file with axios:
submit: function(){
console.log(localStorage.getItem('token'));
axios.post('/api/employees', {
picture: this.file,
}, { headers: { Authorization: 'Bearer '.concat(localStorage.getItem('token')) }, 'Content-Type': 'multipart/form-data' })
.then(response => {
router.push({ name: "IndexEmployees"});
}).catch(error => {
console.log(error.message);
});
}
After submitting, in controller I get the picture attribute but as an empty array.
so I tried to print it using console.
console.log('File '+ JSON.stringfy(this.file))
I got File {}
as an empty object.
So I need to figure out where is the problem in my code or how to make it correctly.
Thanks in advance.

Answer 1

this.file is instance of File, it's always as {} when json encode.
The problem in axios, you must use FormData to send file.
const formData = new FormData();
formData.append('picture', this.file);
axios.post('/api/employees', formData, {
headers: {
'Content-Type': 'multipart/form-data',
// ...
}
}) // ...