在 web 开发中，服务器收到的请求中有各种不同的数据类型，其中包括表单数据。表单数据是一种常见的数据类型，我们经常需要从表单中获取用户输入的数据。Fastify 框架提供了一个模块来处理表单数据，让我们可以方便地获取用户输入。
Form Data 的基本知识
Form Data 是一种通过 HTTP POST 或 PUT 方法提交数据的方式，它通常被用于提交表单数据。在提交表单数据时，数据会被编码成一个字符串，然后发送到服务器。这个字符串的格式与 URL 查询字符串格式相似，但是有一些差别。
Form Data 的数据格式如下：
---------------------------------------- -------------------- ---------- --------------- ----- ---------------------------------------- -------------------- ---------- --------------- ------ ---------------------------------------- -------------------- ---------- -------------- --------------------- ------------- ---------- ------ ------------------------------------------
这个字符串中，每个数据项由一个分隔符 ------WebKitFormBoundaryz8q3gqCXUEA3HFB7 分隔，每个数据项包含了数据的名称以及数据的值。对于文件上传（比如上面的 avatar），数据除了有名称和值之外，还有文件名和文件类型等信息。
Fastify-formdata 模块的使用
Fastify 框架提供了一个 Fastify-formdata 模块，可以方便地处理表单数据。使用 Fastify-formdata 模块，我们可以在路由中使用 request.formData() 方法获取表单数据。request.formData() 方法返回的是一个 promise 对象，我们可以通过 await 关键字来等待 promise 的返回结果。
以下是一个使用 Fastify-formdata 模块获取表单数据的示例：
----- ------- - --------------------- ----------------- ----- --------- ------ -- - ----- -------- - ----- ------------------- ----- -------- - ------------------------- ----- -------- - ------------------------- ----- ---- - ----------------------- -- --- ---
在上面的例子中，request.formData() 方法返回一个 FormData 实例。我们可以通过这个实例的 get() 方法来获取表单数据项的值，比如上面的 username、password 和 avatar。对于文件上传的情况，file 变量是一个文件对象，它包含了文件的名称、类型等信息，以及文件内容。
实现一个表单上传的示例
为了更好地理解 Fastify-formdata 模块的使用方法，我们来实现一个表单上传的示例。我们使用以下 HTML 代码创建一个包含文件上传的表单：
----- ---------- ------------- ------------------------------ ------------------- ------ ----------- -------------------- ------------------ ------ --------------- -------------------- ------------------ ------ ----------- ------------------ ------ ------------- ----------- -------
接下来，在服务器中处理表单数据：
----- ------- - --------------------- ----------------- ----- --------- ------ -- - ----- -------- - ----- ------------------- ----- -------- - ------------------------- ----- -------- - ------------------------- ----- ---- - ----------------------- ----- -------- - -------------- ----- -------- - -------------- ----- -------- - ---------- ----- -------- - ---------------------- ----- ---------------------- ------------------- --- -------------------- ----- -------- -- - -- ----- ----- ---- ---
在上面的代码中，首先通过 request.formData() 方法获取表单数据，然后获取了表单中的用户名、密码和头像数据。使用表单上传时，Fastify-formdata 模块提供了 toFile() 方法来保存上传的文件，我们可以使用这个方法将文件保存到本地。最后，向客户端返回上传成功的消息。
整个表单上传的代码如下：
------
------
---------------------
-------
------
----- ---------- ------------- ------------------------------
-------------------
------ ----------- --------------------
------------------
------ --------------- --------------------
------------------
------ ----------- ------------------
------ ------------- -----------
-------
-------
--------
----- -------- ---------- -
-----------------------
----- ---- - -------------
----- -------- - --- ---------------
----- -------- - ----- ---------- -
------- -------
----- --------
---
----- ------ - ----- ----------------
--------------
-
--------------------------------------------------------- ----------
---------
-------总结
Fastify-formdata 模块是 Fastify 框架中用来处理表单数据的模块，它提供了一个方便的方法来处理表单数据，让我们可以快速地获取用户的输入。在本文中，我们介绍了表单数据的基本知识，以及如何使用 Fastify-formdata 模块来处理表单数据。我们也实现了一个包含文件上传的表单，并演示了如何在服务器中处理这个表单。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66569ee0d3423812e4b7b13e