在前端开发中，文件上传是一个常见的需求。本文将介绍如何使用 Koa 框架实现文件上传功能，包括文件类型限制、文件大小限制、多文件上传、以及上传进度显示等。
1. 准备工作
首先，我们需要安装 Koa 和相关的中间件。可以使用以下命令进行安装：
npm install koa koa-body koa-router koa-static
其中，koa 是 Koa 框架本身，koa-body 是用于解析请求体的中间件，koa-router 是用于处理路由的中间件，koa-static 是用于提供静态文件服务的中间件。
2. 实现单文件上传
要实现单文件上传，我们可以使用 koa-body 中间件提供的 formData() 方法。具体实现过程如下：
-- -------------------- ---- ------- ----- --- - --------------- ----- ------- - -------------------- ----- --- - --- ------ -- -- -------- --- ----------------- ---------- ----- -- ------ ----------- - ---------- --------- - ----------- -- -------- --------------- ----- -- ------- - ---- -- -------- ------------- ----- -- - ----- ---- - ----------------------- -- ------ -------- - - --------- ---------- --------- --------- -- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---展开代码
上述代码中，我们首先配置了 koa-body 中间件，告诉它我们要支持文件上传，并设置上传文件保存路径和保留文件扩展名。然后，在处理请求时，我们通过 ctx.request.files.file 获取上传的文件，并返回文件名和文件路径。
3. 实现文件类型限制
如果我们想限制上传的文件类型，可以在 koa-body 的配置中添加 mimeTypes 属性。例如，要限制上传的文件类型为图片，可以这样配置：
app.use(koaBody({ multipart: true, // 支持文件上传 formidable: { uploadDir: __dirname + '/uploads', // 上传文件保存路径 keepExtensions: true, // 保留文件扩展名 }, mimeTypes: ['image/jpeg', 'image/png', 'image/gif'] // 限制文件类型为图片 }));
4. 实现文件大小限制
如果我们想限制上传的文件大小，可以在 koa-body 的配置中添加 maxFileSize 属性。例如，要限制上传的文件大小为 2MB，可以这样配置：
-- -------------------- ---- ------- ----------------- ---------- ----- -- ------ ----------- - ---------- --------- - ----------- -- -------- --------------- ----- -- ------- ------------ - - ---- - ---- -- ------- --- -- ---------- -------------- ------------ ------------ -- --------- ----展开代码
5. 实现多文件上传
如果我们想支持多文件上传，可以在 koa-body 的配置中添加 multiples 属性。例如，要支持上传多个文件，可以这样配置：
-- -------------------- ---- ------- ----------------- ---------- ----- -- ------ ----------- - ---------- --------- - ----------- -- -------- --------------- ----- -- ------- ---------- ---- -- -------- -- ---------- -------------- ------------ ------------ -- --------- ----展开代码
在处理请求时，我们需要遍历上传的文件列表，分别处理每个文件。例如：
-- -------------------- ---- ------- ------------- ----- -- - ----- ----- - ----------------------- -- --------- ----- ------ - --- -- --------- --- ---- ---- -- ------ - ------------- --------- ---------- --------- --------- --- - -------- - ------- ---展开代码
6. 实现上传进度显示
如果我们想在前端页面中显示文件上传的进度，可以使用 koa-body 中间件提供的 onProgress() 方法。具体实现过程如下：
-- -------------------- ---- ------- ----------------- ---------- ----- -- ------ ----------- - ---------- --------- - ----------- -- -------- --------------- ----- -- ------- ----------- ---------- -- - ------------------------------ -- ------ - -- ---------- -------------- ------------ ------------ -- --------- ----展开代码
在上述代码中，我们通过 onProgress() 方法监听上传进度，并在控制台打印上传进度。如果要在前端页面中显示上传进度，可以使用 WebSocket 或其他技术实现。
7. 结语
本文介绍了如何使用 Koa 框架实现文件上传功能，包括文件类型限制、文件大小限制、多文件上传、以及上传进度显示等。希望本文能对您有所帮助。完整的示例代码可以在 GitHub 上获取：https://github.com/xxx/xxx。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678b226e881faa801fa4905c
