How can append data object when send data via ajax on vue component?

Question

My script to send data via ajax axios like this :

let formData = new FormData()
formData.append('file', user.avatar)
formData.append('selected_data', user)

axios.post(this.baseUrl+'/member/profile/update',
    formData,
    {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }
).then(function(response) {
    console.log('sukses')
})
.catch(function(error) {
    console.log('fail')
})

If I do this :

console.log(user.avatar)
console.log(user)

The result like this :

My code in the backend (I use laravel framework) like this :

public function update(Request $request)
{
    echo '<pre>';print_r($request->all());echo '</pre>';
    die();
}

The result like this :

Why selected data is not show data object?

If the image is not show, look at this :

image 1 : https://postimg.org/image/hqshs9l23/

image 2 : https://postimg.org/image/i3jvyi8hn/

Sinan · Accepted Answer · 2018-03-14 11:19:55Z

1

It says [object Object]because its converted to string. FormData sends these as strings. You can use something like JSON.stringify(user) to convert it to string and then append it.

Maybe something like this will solve your problem.

formData.append('selected_data', JSON.stringify(user))

Then you can convert this back to an object in your backend code.

answered Mar 14, 2018 at 11:19

Sinan

5,97812 gold badges43 silver badges66 bronze badges

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

Collectives™ on Stack Overflow

How can append data object when send data via ajax on vue component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related