Posting a blob image with axios and Vue.js

Posted 4 months ago by GaBPC

Hi, I'm trying to post an image taken with Pixlcore from my Vue.js client to my Laravel controller using Axios. I have converted the image from the data URI to a JS's Blob.

Besides the image, I want to upload several data, in some cases arrays. An example of the data could be:

data: {
    name: "Example name",
    vehicles_id: [1, 2, 3, 4, 5],
    company_id: 9,
    image: Blob,
}

And I'm posting the data as:

axios.post('/route/to/controller', data)...

I added the following header to Axios:

window.axios.defaults.headers.common['Content-Type'] = 'multipart/form-data';

The problem is, on the request, the image attribute is empty and Laravel validation fails because the image is required. And, if I change the plain data object to a FormData object, the array (vehicles_id in this example) is not sent properly and the Laravel validation fails saying vehicles_id is not an array.

There is a way to send all this data together? Or there is some problem in my code I'm not seeing.

Thanks.

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

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.