Axios 发送表格数据 controller 返回 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.

Answer 1

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.

Answer 2

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