У меня есть компонент для просмотра файлов, который я использую для выбора файла, который я хочу загрузить.
Вот мой компонент:
<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>
Вот как я использовал свой компонент:
<p>Select Image: <bim-fileinput v-model="file"></bim-fileinput></p>
Вот как я могу отправить файл с 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);
});
}
После отправки в контроллере я получаю атрибут изображения, но в виде пустого массива.
поэтому я попытался распечатать его с помощью консоли.
console.log ('Файл' + JSON.stringfy (this.file))
У меня есть файл {}
как пустой объект.
Так что мне нужно выяснить, где проблема в моем коде или как ее правильно сделать.
Заранее спасибо.