FormData表示 HTML 表单数据对象。
    构造函数是:

    1. let formData = new FormData([form]);

    如果提供了 HTML form 元素,它会自动捕获 form 元素字段。

    1. <form id="formElem">
    2. <input type="text" name="name" value="John">
    3. <input type="text" name="surname" value="Smith">
    4. <input type="submit">
    5. </form>
    6. <script>
    7. formElem.onsubmit = async (e) => {
    8. e.preventDefault();
    9. let response = await fetch('/article/formdata/post/user', {
    10. method: 'POST',
    11. body: new FormData(formElem)
    12. });
    13. let result = await response.json();
    14. alert(result.message);
    15. };
    16. </script>

    我们可以使用以下方法修改 FormData 中的字段:

    • formData.append(name, value) —— 添加具有给定 namevalue 的表单字段,
    • formData.append(name, blob, fileName) —— 添加一个字段,就像它是 <input type="file">,第三个参数 fileName 设置文件名(而不是表单字段名),因为它是用户文件系统中文件的名称,
    • formData.delete(name) —— 移除带有给定 name 的字段,
    • formData.get(name) —— 获取带有给定 name 的字段值,
    • formData.has(name) —— 如果存在带有给定 name 的字段,则返回 true,否则返回 false

    从技术上来讲,一个表单可以包含多个具有相同 name 的字段,因此,多次调用 append 将会添加多个具有相同名称的字段。
    还有一个 set 方法,语法与 append 相同。不同之处在于 .set 移除所有具有给定 name 的字段,然后附加一个新字段。因此,它确保了只有一个具有这种 name 的字段,其他的和 append 一样:

    • formData.set(name, value)
    • formData.set(name, blob, fileName)