在现代Web开发中，上传文件是一个常见的需求。借助Fetch API，我们可以轻松地实现这一功能。本章节将详细介绍如何使用Fetch API来上传多个文件。
使用HTML表单选择文件
首先，我们需要一个HTML表单让用户选择要上传的文件。这里我们创建一个简单的表单，允许用户选择多个文件：
<form id="file-upload-form">
<input type="file" name="files[]" multiple />
<button type="submit">上传文件</button>
</form>在这个表单中，<input type="file"> 元素使用了 multiple 属性，这意味着用户可以选择多个文件进行上传。
监听表单提交事件
接下来，我们需要监听表单的提交事件，并在事件触发时阻止默认行为，然后处理文件上传逻辑：
-- -------------------- ---- -------
---------------------------------------------------------------------- --------------- -
----------------------- -- ----------
----- -------- - --- --------------- -- ------
-- ------- -------
---------------- -
------- -------
----- --------
--
-------------- -- ----------------
---------- -- -
---------------------- ------
--
------------ -- -
---------------------- -------
---
---在这个例子中，我们首先通过 event.preventDefault() 方法阻止了表单的默认提交行为。接着，我们使用 FormData 对象来收集表单中的文件数据，并将其作为请求体的一部分发送给服务器。
处理服务器响应
服务器接收到请求后，会处理这些文件并返回相应的结果。客户端需要解析服务器的响应，以便了解文件是否上传成功。在上面的例子中，我们假设服务器返回的是JSON格式的数据，并通过 .json() 方法解析了响应体。
处理文件上传进度
为了提供更好的用户体验，我们可以显示文件上传的进度。这可以通过监听 progress 事件来实现：
-- -------------------- ---- -------
----- ---- - --------------------------------------------
----- ------------ - --------------------------------------------
-------------------------------------- ---------- -
----- -------- - --- ---------------
----- --- - --- -----------------
---------------- ---------- ------
--------------------- - --------------- -
-- ------------------------ -
----- --------------- - ------------- - ------------ - ----
--------------------------------------------------
-
--
--------------- - ---------- -
-----------------------
--
------------- - ---------- -
--------------------
--
---------- - ---------- -
-- ----------- --- ---- -
---------------------- ------------------------------
- ---- -
---------------------- ----------------
-
--
----------- - ---------- -
---------------------------
--
-------------------
---在这个示例中，我们使用了 XMLHttpRequest 对象来发送请求，并通过 onprogress 事件监听器来显示上传进度。
处理错误和异常
在文件上传过程中可能会出现各种错误或异常情况。为了确保应用程序的健壮性，我们需要妥善处理这些情况。在上述代码中，我们已经通过 onerror 事件处理程序捕获了请求过程中的错误。
总结
通过以上步骤，我们可以使用Fetch API轻松地实现多文件上传功能。从表单设计到文件选择、再到文件上传及进度显示，每一步都至关重要。希望本章节的内容能够帮助你在实际项目中更好地运用Fetch API来实现文件上传功能。