尝试使用Laravel 5.5上的Vue.js和axios保存图像

Question

我正在使用Laravel 5.5，Vue.js和axios。

我正在从特定元素生成画布图像。保存图像的代码：

        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");
            }
        });

    }

这是来自控制器的代码：

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

但我得到的只是这个错误：Call to a member function store() on null。所以错误在$ path。

我尝试了if($request->hasFile('image'))，但它没有做任何事情。我该怎么办，所以我可以将生成的图像存储到我的公共场所？