Multiple Insert Image Laravel, Vue, Axios - laravel

Question

this is the first time for me to make multiple upload files for vue js laravel. I managed to create multiple images in laravel but only one stored in the database is not the same as the requested image that was entered. something like this is my code.
in my controller laravel.
public function storeProduct()
{
$data = $this->request->all();
$query['gallery'] = new ProductGallery;
if ($this->request->hasFile('images')) {
if (count($this->request->images) > 1) {
foreach($this->request->file('images') as $file){
//filename to store
$query['gallery']->product_id = 2;
$filename = md5($file . time()) . '.jpg';
Storage::disk('public')->put($filename, file_get_contents($file));
$path = public_path('storage/article-image/'.$filename);
Image::make($file)->save($path);
$query['gallery']->file_path = 'article-image/'.$filename;
$query['gallery']->save();
}
}else {
return "not array";
}
}
return "Success";
}
in Vue Js Template.
<template>
<div class="file-input">
<label for="file">Select a File</label>
<input type="file" id="file" #change="onInputChange" multiple>
</div>
</template>
data() {
return {
files: [],
images: [],
}
},
methods: {
onInputChange(e) {
const files = e.target.files;
Array.from(files).forEach(file => this.addImage(file));
},
addImage(file) {
if (!file.type.match('image.*')) {
this.$toastr.e(`${file.name} is not an image`);
return;
}
this.files.push(file);
const img = new Image(),
reader = new FileReader();
reader.onload = (e) => this.images.push(e.target.result);
reader.readAsDataURL(file);
},
upload() {
const formData = new FormData();
this.files.forEach(file => {
formData.append('images[]', file, file.name);
});
axios.post('http://localhost.pro/api/v1/product-store', formData)
.then(response => {
console.log(response);
})
}
}
please help, sorry my english is passive. Thank you