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

Question

我正在尝试使用表单数据在烧瓶中保存值的数组列表。这就是我从前端发送列表数据的方式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每个元素的 a 用逗号分隔。如果要发送数组，则需要单独附加每个元素，就好像它来自 HTML 表单的 POST

for (let element of this.state.styleCheckedList) {

    data.append('styleCheckedList[]', element);

}

这将每个元素视为数组的一部分styledCheckedList。你会完成，但还有另一个问题。现在您正在向 追加对象，而不是字符串FormData，这只会'[object Object]'在服务器端为您提供一个数组。这就是棘手的地方。

无法通过FormData. 您必须 a) 在 JSON 中对其进行编码并在JSON.stringify()服务器上进行解码，或者 b) 如果styleId每个对象中只有密钥，则只发送element.styleId.

如果你不关心这些，你当前代码和服务器上JSON.stringify()的整个对象。JSON.loads()

祝你好运！