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.
Please or to participate in this conversation.