Axios send formData in controller return object object

Question

//Vuejs2 //Laravel v7.x

I turn to you because I'm blocking, I can't find a solution. I want to recover the data in my object in my controller. In my View.vue I make an axios post

     data() {
        return {
          customer: {
             name: 'abc',
             login: 'def'
          },
          file: null
        }
    },methods: {
        submit(){
            let formData = new FormData();
            formData.append("customer", this.customer);
            formData.append("file", this.file);

            axios.post('/project/new',
                        formData, {
                            headers: {
                                "Content-Type": "multipart/form-data"
                            }
                        }).then(data => {
                        console.log(data.data);
                    });
        }
    }

I collect like that in my controller

public function postProject(Request $request)
{
    return $request->customer;  //return [Object Object]
    return $request->customer->name;  //return Trying to get property 'name' of non-object
    return $request->customer['name']; //return Illegal string offset 'name'
    return $request->file;  //return [Object Object]
}

Thx for help. have a nice day.

Fabian Bettag · Accepted Answer · 2020-07-31 07:21:13Z

3

You can't use .append to add objects to your FormData.

Looking at https://developer.mozilla.org/en-US/docs/Web/API/FormData/append the method only accepts an USVString or Blob as the value. Everything else is casted to String.

And the string representation of a standard object in Javascript is [object Object].

You can try JSON.stringify(this.customer) to convert it to its JSON representation.

answered Jul 31, 2020 at 7:21

Fabian Bettag

81013 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Snoxik Over a year ago

I really want to thank you! it finally works! other quick question do I need JSON.stringify if I send files?

Fabian Bettag Over a year ago

To send a File you have to pass an instance of the File class to FormData developer.mozilla.org/de/docs/Web/API/File

Mihail Simbirsky · Accepted Answer · 2020-07-31 07:21:50Z

-2

Try $request->get('customer') or $request->input('customer')

answered Jul 31, 2020 at 7:21

Mihail Simbirsky

804 bronze badges

Collectives™ on Stack Overflow

Axios send formData in controller return object object

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related