在本章节中，我们将详细介绍 request.formData() 方法的使用。formData() 方法返回一个 FormData 对象，该对象包含了当前请求的 FormData 数据。
FormData 对象简介
FormData 对象用于表示表单数据，并且可以方便地将这些数据序列化为适合在 HTTP 请求中发送的形式。这个对象主要用于处理文件上传和 POST 请求中的复杂数据。
创建 FormData 对象
可以通过以下几种方式创建 FormData 对象：
直接实例化：
const formData = new FormData();
使用现有表单元素：
const formElement = document.querySelector('form'); const formDataFromForm = new FormData(formElement);
使用 request.formData()
request.formData() 方法用于获取当前请求中的 FormData 对象。这在处理表单提交和文件上传时非常有用。
基本用法
首先，我们需要设置一个简单的表单：
<form id="uploadForm"> <input type="text" name="username" /> <input type="file" name="avatar" /> <button type="submit">上传</button> </form>
然后，我们使用 JavaScript 来监听表单的提交事件，并通过 fetch 发送请求：
-- -------------------- ---- -------
---------------------------------------------------------------- -------- ------- -
----------------------- -- ----------
----- -------- - --- ----------------------- -- ------
-------------------- -
------- -------
----- ---------
--
---------------- -- ----------------
------------ -- ------------------
-------------- -- ----------------------
---在服务器端处理 FormData
服务器端需要能够解析 FormData 对象。这里以 Node.js 和 Express 为例：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - ------------------------------
----- --- - ----------
-- ------------
----------------------
----------------------- ----- ---- -- -
-- ------
----- -------- - ------------------
----- ------ - -----------------
-- ------
-- -------- -
----- -------- - --------------------
-- -----------
-- ---
---------- -------- --------- --------- -------- ---
- ---- -
---------------------- ------ ------ ---
-
---
---------------- -- -- ------------------- -------------------------处理多文件上传
如果表单中有多个文件输入字段，我们可以遍历 req.files 对象来处理每个文件：
-- -------------------- ---- -------
----------------------- ----- ---- -- -
----- ----- - ----------
-- ------- -- ------------------------- --- -- -
------ ---------------------- ------ ------ ---
-
----- ------- - ---
--- ------ --------- -- ------ -
----- ---- - -----------------
-- -----------
-- ---
-------------- ---------- --------- ----------------- ---
-
---------- -------- --------- ------- ---
---注意事项
FormData对象中的键值对是 URL 编码的。- 当使用
FormData发送文件时，确保Content-Type被设置为multipart/form-data。 - 文件上传时，注意文件大小限制和安全性检查。
总结
通过本章节的学习，你应该已经掌握了如何使用 request.formData() 方法来处理表单数据和文件上传。希望这些示例代码和注意事项能帮助你在实际项目中更有效地使用 Fetch API。