chrisgrim
4 months ago
4
4
Vue

Struggling with Image submission from Vue to Laravel

Posted 4 months ago by chrisgrim

I am trying to submit an image from vue to laravel but having an issue. In my Vue file I have

createImage() {
            let data = new FormData();
            data.append('eventImage', this.eventImage);
            let headers = {'Content-Type': 'application/x-www-form-urlencoded'};

            console.log(this.eventImage);

            axios.patch(`${this.eventUrl}/images`, data, headers)
            .then(response => {
                // all is well. move on to the next page
                console.log(response.data);
            });
        },

When I run the createImage() method the console.log shows this so I know I have a file

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/4QBaRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAGXKADAAQAAAABAAAEOAAAAAAAAP/bAEMAAgICAgICBAICBAYEBAQGCAYGBgYICggICAgICgwKCgoKCgoMDAwMDAwMDA4ODg4ODhAQEBAQEhISEhISEhISEv/bAEMBAwMDBQQFCAQECBMNCw0TExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTE//AABEIBDgGXAMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/3QAEAGb/2gAMAwEAAhEDEQA/APyg2gqfz/Sn9+Rz70wAKOmSeMGlXj5sGvsz82YDcT1A+lABI459aBwcn8Mf0p46hB+ANBLGBSMFjnnr2p3Q7gMYHUUuDgNmnYwCKBXGYwB78nvSgZG0jPqaTBxz0FL8vp6e1AXAKQOByB0 and so on

Then in my controller I have

public function storeImages(Request $request, Event $event)
    {
        if ($request->hasFile('eventImage')) {
            return response()->json(['success' => 'Has File']);
        } else {
            return response()->json(['failed' => 'No File']);
        }
    }

So far, no matter what I do when I submit I get the response failed:No File. In my event.php class I have

 protected $fillable = [
         'eventImage',

    ];

Am I missing something? I can see the file in the console log right before it is submitted, but my controller is telling me that it does not have the file 'eventImage'.

Please sign in or create an account to participate in this conversation.