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

Question

我正在尝试使用表单 data.This 将数组值列表保存在烧瓶中 data.This 我是如何从前端发送列表数据的

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 用逗号分隔。如果你想发送一个数组，你需要单独附加每个元素，就好像它来自 POST 来自 HTML 形式

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()。

祝你好运！

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

save list of value in flask and reactjs using formdata

python

reactjs

flask

multipartform-data

form-data