GaBPC's avatar
Level 1

Posting a blob image with axios and Vue.js

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.

0 likes
0 replies

Please or to participate in this conversation.