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

最新推荐文章于 2025-05-13 09:55:05 发布

NAMECZ

最新推荐文章于 2025-05-13 09:55:05 发布

阅读量3.8w

点赞数 15

CC 4.0 BY-SA版权

分类专栏： js vue jquery 文章标签： FormData FormData添加数组 formData后台接受数组 formData传递数组 formData使用方法

本文链接：https://blog.csdn.net/NAMECZ/article/details/84585709

17 篇文章

订阅专栏

9 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍了FormData对象的创建方法，包括如何通过HTML表单元素创建，以及数据的添加、删除和覆盖操作。同时，讲解了获取FormData中数据的三种方式，并特别注意在提交数组数据时的细节，以及如何正确地进行以确保后台能够接收到完整数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、创建一个空的formData对象

let formData = new FormData();

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

let formData = new FormData(someFormElement);

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");

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

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

3、entries("key") 遍历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"] ；