Uploading Multiple Image in Laravel and vue js

Question

Am working on an app that should upload multiple images in the database using laravel and vue js.

Now for some reason it keeps on returning null value on the back end side. Hope someone can pin point the problem in this code.

this is my front-end code vue js

<template>
    <div>
        <div>
            <form @submit.prevent="submit">
                <input type="file" @change="onChange" multiple/>
                <input type="submit" value="Upload">
            </form>
        </div>
    </div> 
</template>
<script>
export default {
  data: ()=>({
      image:[],
  }),
  methods:{
      onChange(e){
        
          this.image = e.target.files[0];
      },
      submit(){
          let payload = new FormData();
          
            for(let i=0; i<this.image.length; i++){
                payload.append('image[]', this.image[i])
                }

                axios.post('/api/formsubmit',payload).then(res=>{
                    console.log("Response", res.data)
                }).catch(err=>console.log(err))


      }
  },
}
</script>

and this is may back-end code Laravel 7

public function multipleupload(Request $request)
    {
       try{
           if($request->hasFile('image')){
                $upload = $request->file('image');
                $file_name = time().'.'.$upload->getClientOriginalName();
                $upload->move(public_path('image'), $file_name);
           
               return response()->json([
                   'message'=>'File upload successfully!'
               ], 200);
           }else {
               return 'no data';
           }
       }catch(\Exception $e){
           return response()->json([
               'message'=>$e->getMessage()
           ]);
       }
    }

This code will always return 'no data'. been trying to figure it out but with no progress I hope someone can help.

Thanks,

Answer 1

if you want to upload multiple images you have to do loop, you can try this :

    public function multipleupload(Request $request)
    {
        $input = $request->all();

        request()->validate([

            'image' => 'required',

        ]); 

         if($request->hasfile('image'))
         {
            foreach($request->file('image') as $image)

            {
                $imageName=file_name =$image->getClientOriginalName();
                $image->move(public_path().'/images/', $imageName);  
                $insert['image'] = "$imageName";

            }
         }       

        Image::create($insert);

        return back()

                ->with('success','Multiple Image Upload Successfully');
    }