Missing boundary in multipart/form-data POST data with Vue Axios and Laravel

Asked Jun 17 '21 at 17:56

Active Jun 17 '21 at 17:56

Viewed 1,528 times

I am trying to submit an object that has formData inside of it

 data() {
     return {
         card: this.initializeCardObject(),
     }
},
initializeCardObject() {
     return {
         blurb: null,
         thumbImagePath: null,
         collection_id: this.collection.id,
         image: new FormData(),
      }
},

However when I submit it

methods: {
    async saveCard(image) {
         this.card.image.append('thumbnail', image);
         await axios({
             method: "post",
             url: "/cards",
             data: this.card,
             headers: { "Content-Type": "multipart/form-data" },
         })
         .then( res => {
             console.log(res.data);
         })
     }

It gives me the error Missing boundary in multipart/form-data POST data. If I don't add the headers it submits to my controller but the formData has been turned into an array with no data. How do I send the image?

asked Jun 17 '21 at 17:56

Chris Grim

I think that the formdata it's in this.card.image, and not in this.card – porloscerros Ψ Jun 17 '21 at 18:05
Is there a way to send formData inside an object? – Chris Grim Jun 17 '21 at 18:13
2

Nope, you should send a FormData object or a Js object. Check [this](https://stackoverflow.com/a/22783314/7498116) – porloscerros Ψ Jun 17 '21 at 18:17
I see, so the formData has to be the top level object then I should add anything else to the formData object. – Chris Grim Jun 17 '21 at 18:23
1

Yep. That's it. – porloscerros Ψ Jun 17 '21 at 18:28

Missing boundary in multipart/form-data POST data with Vue Axios and Laravel

0 Answers0