post 带有 formData axios 的数据数组

Question

我将使用 formData 发送数组数据。后端接受带有破折号的数据数组；例如，如果在邮递员中使用这样的表单数据：

id_barang : 122;288;383 (send 3 value id with dash ;)

如果我用formData是这样的吗？

  data [
       {
          id_barang : 122
       },
       {
          id_barang : 288
       },
       {
          id_barang : 383
       }
    ]
    
     let barang = data.map(x => x.id_barang).join(";");
     const f = new FormData();
     f.append("id_barang", barang);


     //please correct me if i'm wrong

我的后端

    id_barang_data := strings.Split(r.FormValue("id_barang"), ";") // => 1002;983;756
    
    for i, _ := range id_barang_data { // loop through the files one by one
            rSegAnalisaMethodDetail := models.SegAnalisaMethodDetail{}
            id_barang, err := strconv.Atoi(id_barang_data[i])
            if err != nil {
                responses.ERROR(w, http.StatusBadGateway, err)
            }

Answer 1

您可以对数组进行字符串化并将其附加到 FormData 中，在后端，您可以解析该数据并相应地使用它。查看下面的示例。

let formData = new FormData();

let data = [
       {
          id_barang : 122
       },
       {
          id_barang : 288
       },
       {
          id_barang : 383
       }
    ]
formData.append("arr", JSON.stringify(data));


for (var value of formData.values()) {
   console.log(value);
}

Answer 2

您的代码没有任何问题。这里唯一缺少的是您没有提供使用 axios 发送请求的方法。当您将 FormData 与 axios 一起使用时，您需要添加 'Content-Type': 'multipart/form-data'。但是，如果您不向 Formdata 添加任何文件，则无需使用 Formdata

这是比赛动作：

var banyakBarang = [
    { id_barang: 122 },
    { id_barang: 288 },
    { id_barang: 383 }
];

var barangString = banyakBarang.map(function(barang) {
    return barang.id_barang;
}).join(';');

var formData = new FormData();
formData.append('id_barang', barangString);

axios({
    method: 'post',
    url: '/x',
    data: formData,
    headers: {
        'Content-Type': 'multipart/form-data'
    },
});

请求负载：

id_barang: 122;288;383

Answer 3

axios 有 paramsSerializer 选项，你可以用 qs.stringify.

将它设置为逗号分隔的 arrayFormat

const paramsSerializer = (params: any) => stringify(params, { arrayFormat: 'comma' });

post 带有 formData axios 的数据数组

post data array with formData axios

javascript

multipartform-data

vue.js

axios