[使用formdata将值列表保存在flask和reactjs中

Question

我正在尝试使用表单数据将值的数组列表保存在flask中。这是我从前端发送列表数据的方式

saveProjectDesign = () => {
    var data = new FormData();
    data.append('styleCheckedList', this.state.styleCheckedList);

    axios.post(this.state.apiUrl+'/api/v1/project/project/projectdesignsave', data, config)

        .then((response) => {
            console.log("response",response);
            if (response.data.status === "success") {
                openCustomNotifierSnackbar({ message: response.data.message, duration:3000, notifyType: 'success' });

            }
            if (response.data.status === "failed") {
                openCustomNotifierSnackbar({ message: response.data.message, duration:3000, notifyType: 'error' });
            }
        })
        .catch( (err)=> { console.log(err); });
};

这是我从前端发送的styleCheckedList中的列表数据：

0: {styleId: "1"}
1: {styleId: "2"}
2: {styleId: "3"}

这是如何尝试获取烧瓶中的值：

 styleListChecked = request.form.getlist("styleCheckedList")

但是值会像这样在后端打印：

['[object Object],[object Object],[object Object]', '[object Object],[object Object],[object Object]']

我在这里做错什么了？

Answer 1

这里是问题：FormData的append方法需要一个字符串，而不是数组，不是对象，而是字符串。当您传入该数组时，JavaScript会自动在其上调用.toString()并得到丑陋的结果，每个元素的toString以逗号分隔。如果要发送数组，则需要单独添加每个元素，就像它是从HTML表单的POST中添加的一样]

for (let element of this.state.styleCheckedList) {
    data.append('styleCheckedList[]', element);
}
这将每个元素都视为数组styledCheckedList的一部分。您会完成的，但是还有另一个问题。现在，您将对象而不是字符串附加到FormData，这将在服务器端为您提供'[object Object]'数组。这是棘手的地方。

无法通过FormData发送复杂的JavaScript对象。您必须a）用JSON.stringify()在JSON中编码并在服务器上解码，或者b）如果每个对象中只有styleId键，则仅发送element.styleId。

如果您不关心这些，请在当前代码中将整个对象JSON.stringify()，并在服务器上将JSON.loads()进行。

祝你好运！