文件上传是现代 Web 应用的必备功能之一。在 TypeScript 中，处理文件上传要求我们仔细考虑每个步骤，并确保代码可读性和可维护性。本指南将全面介绍 TypeScript 中文件上传的处理过程和示例代码，让你更深入了解此技术，并且能够逐步掌握其用法。
上传前准备
在上传文件前，我们需要做一些准备工作：
- 确定上传文件的类型。
- 验证上传文件的大小。
- 确定上传文件的名称或目录。
为了正确处理上传的文件，我们需要了解上传的每个文件的特征。根据文件类型的不同，我们可能需要特定的处理方式，例如对于图片文件，可以对其进行压缩和缩放。
我们还需要验证上传文件的大小。这是必要的，因为过大的文件会耗尽服务器资源，导致系统崩溃。可以通过检查文件的大小并与服务器配置进行比较，来确保上传文件在服务器容量限制内。
最后，我们需要在服务器上确定上传文件的名称和目录。上传文件的默认存储位置通常是 uploads/ 目录下。我们需要确保文件名称和目录的唯一性，以避免出现冲突。
客户端处理
在客户端中，我们需要使用表单提交来上传文件。可以使用 <form> 和 <input> 元素，指定上传文件的类型和属性。例如：
<form action='/post/image/' id='upload-form' method='POST' enctype='multipart/form-data'>
<input type='file' name='image' accept='image/*'/>
<button type='submit'>submit</button>
</form>在表单中指定 enctype 为 multipart/form-data，才能上传二进制文件。此外，可以使用 accept 属性来限制上传文件的类型。
在提交表单前，我们需要检查上传的文件是否合法。例如，我们需要确保文件类型和文件大小都符合要求。可以使用 JavaScript API 以及第三方库来实现该功能。常见的 JavaScript 文件验证库包括 dropzone.js 和 fineUploader。
服务端处理
在服务器端，我们需要执行以下步骤来处理接收到的文件：
- 从 HTTP 请求中读取文件。
- 验证上传文件的类型和大小。
- 将文件存储到服务器中。
我们可以使用 Node.js 和 koa 框架来完成这些步骤。
读取文件
我们需要从 HTTP 请求中读取文件。koa 提供了 koa-body 中间件，可以轻松实现该功能。
-- -------------------- ---- -------
------ --- ---- ------
------ ------- ---- -----------
----- --- - --- ------
-----------------
--------------- -- ------
------------
-- -----------
---------- --------------------------------------
-------------------
-
----koa-body 中间件默认使用 formidable 这个库来处理文件上传。通过设置 uploadDir 和 keepExtensions 两个参数来指定上传的目录和文件名的命名方式。
验证文件
在 koa-body 中，文件保存在 ctx.req.files 中，我们可以通过遍历该数组，来逐个验证上传的文件：
-- -------------------- ---- -------
------ --- ---- ------
------ ------- ---- -----------
----- --- - --- ------
-----------------
---------------
------------
---------- --------------------------------------
------------------- -- -------
-
--------------------
-------------------
-
----
------------- --------
----- - ----- - - --------
----- ------ - ---
--------- ---- -- -------------------- --
-- ------
------------ - ---------------- -
----------------- ---- ------- --------
-
-- ------
--------------------------------------------------- -
----------------- ---- ---- --- --- ----- --- ----------
-
-
------------------- -
----------------------
-
-- ------------------
--------------- - ------
----- -------
--在错误处理中间件中，我们可以通过遍历 ctx.req.files 集合来逐个验证上传的文件。我们将所有的验证结果记录在一个名为 errors 的数组中。如果验证失败，我们将使用 ctx.throw 函数向客户端返回错误消息。
保存文件
最后，我们需要将上传的文件保存到服务器的指定位置。
-- -------------------- ---- -------
------ --- ---- ------
------ ------- ---- -----------
------ -- ---- -----------
------ ---- ---- -------
----- --- - --- ------
-----------------
---------------
------------
---------- --------------------------------------
-------------------
-
--------------------
-------------------
-
----
------------- --------
----- - ----- - - --------
-- --------------
-- ---
----- --------- - ---
------- -------- -- ------ -
----- ---- - ----------------
----- --- - ------------------------
----- --- - ---------
-- --------
----- -------- - -----------------------
----- -------- - ---------------------------------------
-- ------------
----------------------------
-------------------------
-
-- -----------------------
--------------- - ----------
----- -------
--在此示例中，我们遍历了 ctx.req.files 集合并将文件保存到服务器的指定位置。使用 fs.move 函数将文件移动到指定路径下。
完成以上步骤后，就完成了文件上传的完整处理过程。
总结
本指南全面介绍了 TypeScript 中文件上传的处理过程和示例代码，使你更深入了解该技术，逐步掌握其用法。在实际开发中，我们需要根据实际需求来定制上传流程，以满足具体业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485519c48841e9894432bc4