将对象数组附加到 React 中的 FormData

Question

我知道这个问题已经问了十几次了，但我似乎无法得到任何工作答案。

我有一个带有 React 前端和 Django Rest 后端的应用程序，我正在尝试在请求中发送对象数组。我已经让它在 Postman 中的原始 JSON 输入和 FormData 中工作：

所以我知道我的后端应该能够很好地处理它，但无论我在 React 代码中尝试什么，我都会得到相同的 400 错误。这是我前端的（稍微修剪过的）函数：

    const formData = new FormData();
    if(data.photo.length >= 1) {
        formData.append('photo', data.photo[0]);
    }
    formData.append('recipe_name', data.recipe_name);

    formData.append('ingredients', JSON.stringify(data.ingredients));
    
    // data.ingredients.forEach(element => {
    //     console.log(JSON.stringify(element))
    //     formData.append('ingredients[]', JSON.stringify(element))
    // });

    // for(let i=0; i < data.ingredients.length; i++) {
    //     console.log(data.ingredients[i])
    //     formData.append('ingredients[]', JSON.stringify(data.ingredients[i]))
    // }

    console.log(formData)

    const config = {
        headers: {
            'content-type': 'multipart/form-data',
            'Authorization': localStorage.getItem('access_token') ?
            'Bearer ' + localStorage.getItem('access_token') :
            null,
        },
    };
    axiosInstance.post('/recipes/', formData, config).then((response) => {
        console.log(response.data);
        navigate('/recipe/' + response.data.id);
    });

我留下了一些我尝试过的不同代码的注释，但总而言之，我已经尝试过了：

formData.append('ingredients', data.ingredients);

formData.append('ingredients', JSON.stringify(data.ingredients));

formData.append('ingredients[]', JSON.stringify(data.ingredients));

data.ingredients.forEach(element => {
    formData.append('ingredients[]', JSON.stringify(element))
});

data.ingredients.forEach(element => {
    formData.append('ingredients', JSON.stringify(element))
});

data.ingredients.forEach(element => {
    formData.append('ingredients', element)
});

data.ingredients.forEach(element => {
    formData.append('ingredients[]', element)
});

我什至尝试过使用相同的排列进行传统的 for 循环，但没有成功。

我也尝试过查看从前端发送的数据本身，但据我所知，它也没有任何问题。这是来自我的表单组件的原始数据：

以及各个元素（在 forEach 循环中打印出来）：

以及通过 JSON.stringify() 传递的相同元素

我真的不知道还能尝试什么，感觉我基本上已经尝试了一切，而且我在之前的线程中找到的同一问题的所有答案都表明了我已经尝试过的内容。任何帮助将不胜感激！

Answer 1

我认为你必须将其添加为 json 文件 blob:

var jsonObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

var jsonBlob = new Blob([JSON.stringify(jsonObject)], { type: 'application/json' });

formData.append('jsonFile', jsonBlob, 'data.json');