时间戳

首页 > 解决方案 > 如何在 Vue js 中将 formData 对象作为键值对发送？

javascript - 如何在 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)

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

标签： javascriptformsvue.jsjavascript-objectsmultipartform-data

解决方案

将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 解析回服务器端的可用代码，以使用复杂对象内的数据。

推荐阅读