Я пытаюсь отправить форму с помощью почтового запроса axios в laravel.В этой форме у меня есть 3 поля, имя, возраст и файл с именем image.
вот форма
<form action="{{route('forms.store')}}" method="post" enctype="multipart/form-data">
@{{name}}
@csrf
<span v-if="errors.name">@{{errors.name[0]}}</span>
<label for="name">Name:</label>
<input type="text" name="name" id="name" v-model="name">
<span v-if="errors.age">@{{errors.age[0]}}</span>
<label for="age">Age:</label>
<input type="text" name="age" id="age" v-model="age">
<label for="image">Image:</label>
<span v-if="errors.image">@{{errors.image[0]}}</span>
<input type="file" name="image" id="image" @change="imageChanged">
<button @click.prevent="submitForm">Submit</button>
</form>
Вот мой код vueJs:
const app = new Vue({
el: '#app',
data:{
name:'',
age:'',
image:'',
errors:{}
},
methods:{
imageChanged(e){
app.image = e.target.files[0]
console.log(e.target.files[0]);
},
submitForm(){
const config = { headers: { 'Content-Type': 'multipart/form-data' } };
const fd = new FormData(this.$data);
fd.append('image',this.image);
axios.post('{{route('forms.store')}}',this.fd,config).then((response)=>{
console.log(response.data);
}).catch((error)=>{
//console.log(error.response.data);
this.errors = error.response.data.errors;
})
}
}
});
А вот и мой контроллер
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required',
'age' => 'required',
]);
if ($request->hasFile('image')) {
$image = $request->file('image');
return $ext = $image->extension();
} else {
return "NOT OK";
}
}
Итак, здесь я проверяю имя и возраст.Но моя проблема заключается в том, что, когда я заполняю форму и отправляю форму, она отправляет сообщения об ошибках, требующих заполнения поля имени и возраста.
где я делаю ошибку и как получить эти данные в контроллере.Заранее спасибо.