Posting a blob image with axios and Vue.js

Published 2 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:'/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.


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