如何在Vue js中将formData对象作为键值对发送？

问题描述

我正在尝试在后端上传包含vue和laravel的图像。一切顺利，直到我遇到问题。当我进行axios调用时，仅以参数形式发送formData时，图像就会发送出去。

 let formData = new FormData();
 formData.append("image",this.image);
 axios.post('url',formData)

但是在axios请求上，我想发送一个对象，而不仅仅是formData，像这样：

const myObj={ name:'hello','shop_id':2,image:formData }
axios.post('url',myObj)

但这不起作用。我有什么办法可以解决这个问题？

解决方法

将name和shop_id值添加到FormData对象。在这种情况下，FormData是您可以在其中发送所有数据的容器。

let formData = new FormData();
formData.append('image',this.image);
formData.append('name','hello');
formData.append('shop_id',2);
axios.post('url',formData)

如果您的数据变得更加复杂，并且您需要发送一个包含大量数据的大对象，那么您可以在其中一个键中将该对象作为JSON值发送。

const complexObject = {
  ...loads of data here
};

formData.append('complexObject',JSON.stringify(complexObject))

将JSON解析回服务器端的可用代码以使用复杂对象中的数据。