如何使用 axios 发送数组和表单数据 - Vue

Posted 2023-02-16

【中文标题】如何使用 axios 发送数组和表单数据 - Vue

【英文标题】：How to send array and formdata with axios - Vue

【发布时间】：2021-10-20 18:13:25

【问题描述】：

我正在做一个 vue / laravel 项目，我想用 axios 发送一个数组和表单数据。

这是我的代码：

submit()
    //The FormData
    const formData = new FormData
    formData.set('images', this.imagesInfo)

    //The Array
    this.product =
        data: this.data, 
        option: this.option
    

    //How can i send *this.product* and *formData* ?
    axios.post('/admin/product/add', ****)

如何使用 axios 发送 this.product 和 formData？

【问题讨论】：

你的 "array" 不是一个数组，它是一个对象。你想如何发送它，作为 JSON 或application/x-www-form-urlencoded？你打算如何在服务器端阅读它？

【参考方案1】：

在表单数据中，不能直接发送数组。

为了在formdata 中发送数组，您必须运行loop 并传递如下值：

const array = [1,2,3,4,5,6];

const formData = new FormData();

array.forEach(function(value) 
  formData.append("id[]", value) // you have to add array symbol after the key name
)