Laravel vue js image upload

 

//Laravel image upload code

//way 1

public function store(Request $request)

    {

        $this->validate($request, [

            'image' => 'required'

    ]);

    

    if($request->get('image'))

    {

        $image = $request->get('image');

        $name = time().'.' . explode('/', explode(':', substr($image, 0, strpos($image, ';')))[1])[1];

        \Image::make($request->get('image'))->save(public_path('images/').$name);

    }

    $image= new FileUpload();

    $image->image_name = $name;

    $image->save();

    return response()->json(['success' => 'You have successfully uploaded an image'], 200);

    }

//vue js html code

.........

<div class="row">

                        <div class="col-md-3" v-if="image">

                              <img :src="image" class="img-responsive" height="70" width="90">

                           </div>

                          <div class="col-md-6">

                              <input type="file" v-on:change="onImageChange" class="form-control">

                          </div>

                          <div class="col-md-3">

                             <button class="btn btn-success btn-block" @click="uploadImage">Upload Image</button>

                          </div>

                       </div>

//script code

<script>

    export default {

        data(){

            return {

                image: ''

            }

        },

        methods: {

            onImageChange(e) {

                let files = e.target.files || e.dataTransfer.files;

                if (!files.length)

                    return;

                this.createImage(files[0]);

            },

            createImage(file) {

                let reader = new FileReader();

                let vm = this;

                reader.onload = (e) => {

                    vm.image = e.target.result;

                };

                reader.readAsDataURL(file);

            },

            uploadImage(){

                axios.post('/image/store',{image: this.image}).then(response => {

                   if (response.data.success) {

                     alert(response.data.success);

                   }

                });

            }

        }

    }

</script>