0 Best Reply Awards

  • Member Since 2 Months Ago
  • 0 Lessons Completed
  • 0 Favorites

10th August, 2018

GaBPC started a new conversation Posting A Blob Image With Axios And Vue.js • 2 months ago

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.


Edit Your Profile

Want to change your profile photo? We pull from