Почему не загружается файл? как сделать, чтоб он дошел до сервера?
Вот форма:
<form @submit.prevent="create" method="POST">
<div class="form-el">
<div class="form-box">
<div class="margin">
<label for="name">Имя</label>
<div class="form-input">
<input id="name" class="uk-input uk-width-1-2" type="text" v-model="name" placeholder="Имя">
</div>
</div>
<div class="margin">
<label for="keywords">Ключевые слова</label>
<div class="form-input">
<input id="keywords" class="uk-input uk-width-1-2" type="text" v-model="keywords" placeholder="Ключевые слова">
</div>
</div>
</div>
</div>
<div class="from-el margin">
<div uk-form-custom="target: true">
<input type="file" accept="image/*" @change="uploadImage($event)" id="file-input">
<input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" disabled>
<img src="img/search.svg" alt="" style="background: #000;">
</div>
</div>
<div class="from-el margin">
<button type="submit" class="uk-button uk-button-default">Добавить</button>
</div>
</form>
И вот два метода, которые отвечают за загрузку данных на сервер:
uploadImage($event) {
const URL = 'http://vue/crud/img/';
let data = new FormData();
data.append('name', 'my-picture');
data.append('file', $event.target.files[0]);
let config = {
header : {
'Content-Type' : 'image/png'
}
};
return axios.post(
URL,
data,
config
);
},
create: function(){
axios.post('/api/crud',{
name: this.name,
keywords: this.keywords,
title: this.name
//Сохраняем изображение
})
.then(response => this.uploadImage())
.then(response => {
console.log(response);
location.href = '/crud';
}).catch(err =>{
console.log(err.response);
});
}