将具有嵌套数组的对象转换为 FormData

Question

我有这个对象

{
  "Data1": 1,
  "Data2": "some string",
  "Data3": [
    {
      "ID": 0,
      "Name": "some name",
      "SomeArray": []
    },
    {
     "ID": 0,
     "Name": "another name",
     "SomeArray": [
       "DataA": 0,
       "DataB": "some data again"
     ]
    }],
  "Data4": "some string again"
}

它将在控制器中接收的模型是这样的：

public class Data 
{
   public int Data1 { get; set; }
   public string Data2 { get; set; }
   public List<AnotherClass> Data3 { get; set; }
   public string Data4 { get; set; }
}

public class AnotherClass
{
   public int ID { get; set; }
   public string Name { get; set; }
   public List<DataList> SomeArray { get; set; }
}

public class DataList
{
   public int DataA { get; set; }
   public string DataB { get; set; }
}

要在 Data3 中设置的数据来自 table，其中从模态弹出窗口检索新输入并填充到 table 中。 SomeArray 数据来自使用 Select2 工具在下拉列表中设置多个选项的下拉菜单。

这个想法是，一旦用户点击“保存”，它将获取所有数据，包括 table 中的数据，并形成这个 JSON 对象。从这个对象，我想把它转换成 FormData。但是，当它迭代到 Data3 时，即使我将其字符串化，它也不会将其转换为对象数组。我也试过这个 Convert JS Object to form data 但没有成功。

这是我目前所做的：

var details = GetDetails(); // This contains `Data1`, `Data2` and `Data4`
var data3 = GetData3FromTable(); // This contains the list of `Data3`

var result = new FormData();
for (var key in details) {
   result.append(key, details[key]);
}

result.append("Data3", JSON.stringify(data3));
result.append("UploadFile", $("#upload")[0].files[0]);

// do ajax put or post after this line

是否有任何 jquery 或 javascript 插件可用于将此对象转换为 FormData？或者有没有其他方法可以将其转换为 FormData?

Answer 1

您可以在 HTML 表单中发送深度嵌套的数据，但我注意到不同的网络服务器可能会以不同的方式解释更复杂的结构，因此您可能需要检查 framework/app 的中间件以确保正确解码。您可能会发现将值读入 Javascript 并从那里发送数据会更容易。

您的 Data3 对象可以用这样的方式表示：

<input type="text" name="data[Data3][0][id]" value="0">
<input type="text" name="data[Data3][0][Name]" value="some name">
<input type="text" name="data[Data3][0][SomeArray][]" value="">

您需要一个包含子元素的“父”字段（data 在本例中）。

请注意，您必须小心任何 [] -- 您可能需要像上面那样手动指定数组索引，否则将不会遵守值的“分组”。

还要注意以 [] 结尾的名称：这些字段仍会发送值，即使它是空字符串，因此您可能需要将其过滤掉。

Answer 2

我发现这个 link object-to-form-data 可以将任何对象（包括嵌套数组）和上传文件转换为 FormData。但是，只需要进行一项更改：

从 link 中，将 objectToFormData(obj[property], fd, property); 替换为 objectToFormData(obj[property], fd, formKey);。这样，它将原始属性设置为密钥。 FormData 传递给控制器时的输出将是这样的：

Data1: 1
Data2: some string
Data3[0][ID]: 0
Data3[0][Name]: some name
Data3[0][SomeArray]: []
Data3[1][ID]: 0
Data3[1][Name]: another name
Data3[1][SomeArray][0][DataA]: 0
Data3[1][SomeArray][0][DataB]: some data again
Data4: some string again

我希望这对其他人有帮助！

将具有嵌套数组的对象转换为 FormData

Convert object with nested arrays to FormData

javascript

.net

asp.net-mvc

form-data