[Vuejs]-Image CRUD in laravel 9 with vue Js

by

0👍

For storing images with Form you need to add few lines inside contoller for handling and storing image and also you need to add enctype inside form submit.

First you need to change :

<Form @submit="saveData()" enctype="multipart/form-data">

Now you need to change image input field :

<Field name="image" type="file" class="form-control3" v-model="form.image" :rules="isRequired" />

And inside the controller you need to change code for request :

public function store(Request $request)
{
    $data = $request->all();
    if ($request->hasFile('image')) {
        $image = $request->file('image');
        $path = $image->store('public/images');
        $data['image'] = $path;
    }
    $response = Form::create($data);
    return response()->json([
        'status' => 'success',
        'data' => $response
    ], 200);
}

And finally in your model :

protected $fillable = [
    'nama',
    'alamat',
    'nomor',
    'email',
    'image',
];

Leave a comment