【JS】FormData的使用以及提交数组的方法_formdata提交对象数组

一、创建FormData的方法通常有两种：

1、 创建一个空的formData对象

let formData = new FormData();

2、通过HTML表单元素创建FormData对象

let formData = new FormData(someFormElement);

 

二、FromData对象数据的 添加 删除 和 覆盖。

1、添加数据（若对象内没有该key则添加新key，若有该key，则在该key的最后位置追加新值）

formData.append("key","value"); // key --> value
 
formData.append("key","value1");  // key --> ["value","value1"]

2、删除数据（删除该key内的所有键值）

formData.delete("key")

3、覆盖（会覆盖所有该key对应的值）

formData.set("key","value1");

 

三、因为formData()里的数据打印不出来，所以提供以下几种方法获取到formData()里的数据。

1、get("key")  获取到该key的第一个值

2、getAll("key") 获取到该key的所有值

3、entries("key") 遍历FormData对象中的所有键值对

 

四、FormData对象提交数组数据时的注意事项。

1、这种方法组成的数组，提交以后，后台只能获取到该key内的最后一条数据。

formData.append("key","value1");
formData.append("key","value2");
formData.getAll("key"); // ["value1","value2"]

通过getAll()方法可以看到，此时key为一个数组，但是提交数据后，后台只能接收到  key："value2" ；

解决办法：

formData.append("key[]","value1");
formData.append("key[]","value2");

用这种方法提交数据后，后台的获得的数据为  key：["value1","value2"]  ；