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

【问题标题】：How to send array and formdata with axios - Vue如何使用 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？你打算如何在服务器端阅读它？

标签： vue.js vuejs2 axios

【解决方案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
})

【讨论】：