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: </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.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire