Trying to save an image with Vue.js and axios on Laravel 5.5

I am using Laravel 5.5, Vue.js and axios.

I am generating a canvas image from a particular element. The code for saving an image:

        save(url) {
        let element = document.getElementsByClassName('preview');
        html2canvas(element, {
            proxy: url,
            onrendered: function(canvas) {
                var image = canvas.toDataURL("image/jpeg");
                console.log(image);
                Vue.axios.post('/add', {
                    image: image,
                  })
                  .then(function (response) {
                    console.log(response);
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
                // downloadURI("data:" + image, "yourImage.jpg");
            }
        });

    }

This is the code from controller:

    public function addPost(Request $request) {
    $photo = $request->file('image');
    $path = $request->photo->store('img');
    return 'something';
}

But all I am getting is this error: Call to a member function store() on null. So the error is in $path.

I have tried with if($request->hasFile('image')) but it doesn't do nothing. What should I do, so I can store generated image to my public derictory?

via Chebli Mohamed