在 vue 组件上通过 ajax 发送数据时如何附加数据对象？答案

【问题标题】：How can append data object when send data via ajax on vue component?在 vue 组件上通过 ajax 发送数据时如何附加数据对象？
【发布时间】：2018-08-22 20:12:34
【问题描述】：

我的脚本通过这样的 ajax axios 发送数据：

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')
})

如果我这样做：

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

结果如下：

我在后端的代码（我使用 laravel 框架）是这样的：

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

结果如下：

为什么选择的数据不显示数据对象？

如果图片没有显示，看这个：

图片 1：https://postimg.org/image/hqshs9l23/

图片 2：https://postimg.org/image/i3jvyi8hn/

【问题讨论】：

标签： laravel vue.js vuejs2 image-uploading vue-component

【解决方案1】：

它说[object Object]因为它转换为字符串。 FormData 将这些作为字符串发送。您可以使用 JSON.stringify(user) 之类的东西将其转换为字符串，然后附加它。

也许这样的事情会解决你的问题。

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

然后您可以将其转换回后端代码中的对象。

【讨论】：