在现代 Web 应用中，文件上传是必不可少的功能。Koa 是一款轻量级的 Node.js Web 框架，提供了丰富的中间件，可以方便地实现文件上传功能。
本文将介绍如何在 Koa 项目中实现文件上传功能，以及如何处理上传的文件。
上传文件的基本原理
在网络中，文件上传本质上是将二进制数据通过 HTTP 协议发送到服务器上。在服务端，我们需要将接收到的数据存储为文件。
HTTP 协议中提供了 multipart/form-data 的内容类型，它可以用于发送包含文件的表单数据。浏览器会将每个表单字段分割成多个部分，每个部分包含一个 Content-Disposition 头部字段，用于标识字段的名称及文件名等信息。
服务端需要解析这些数据，提取出每个表单字段的内容，并将文件数据写入到磁盘上。
使用 Koa-body 实现文件上传
Koa-body 是一个用于解析 HTTP 请求体的中间件，它支持解析多种类型的请求体，包括 JSON、URL-encoded、XML、text 等格式。Koa-body 还支持 multipart/form-data 格式的数据，因此可以方便地实现文件上传功能。
安装 Koa-body：
npm install koa-body --save
在 Koa 项目中使用 Koa-body：
// javascriptcn.com 代码示例
const Koa = require('koa');
const Router = require('koa-router');
const koaBody = require('koa-body');
const app = new Koa();
const router = new Router();
app.use(koaBody({
multipart: true, // 支持文件上传
}));
router.post('/upload', async ctx => {
const file = ctx.request.files.file; // 获取上传的文件
// 处理上传的文件，比如将文件保存到服务器上
ctx.body = '文件上传成功';
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000);在上面的示例代码中，我们首先在 Koa 程序中引入 Koa-body 库，并将其配置为支持 multipart/form-data 格式的请求体。然后我们在路由处理函数中获取上传的文件，这里我们假设上传的文件字段为 file。
现在我们已经可以获取上传的文件了，接下来我们需要将文件保存到服务器上。
实现文件保存
在接收到上传文件的数据之后，我们可以将文件写入服务器上的某个目录中。为了避免多个用户上传的文件冲突，我们可以将上传的文件名更改为唯一的标识符。
以下是实现文件上传和保存功能的示例代码：
// javascriptcn.com 代码示例
const fs = require('fs');
const path = require('path');
router.post('/upload', async ctx => {
const file = ctx.request.files.file; // 获取上传的文件
const reader = fs.createReadStream(file.path); // 读取文件流
const ext = file.name.split('.').pop(); // 获取文件后缀名
const filename = `${Date.now()}.${ext}`; // 以时间戳为文件名
const filePath = path.join(__dirname, '/uploads', filename); // 保存文件的路径
const writer = fs.createWriteStream(filePath); // 创建可写流
reader.pipe(writer); // 将可读流拷贝到可写流
ctx.body = '文件上传成功';
});在上面的示例代码中，我们首先使用 fs 模块创建可读流用于读取上传的文件数据，然后根据文件后缀名和当前时间戳生成文件名。最后将文件写入指定路径的可写流中。
现在我们已经成功地实现了文件上传和保存功能，接下来我们可以通过访问上传的文件来验证是否保存成功。
访问上传的文件
在 Koa 中，默认情况下是无法直接访问上传的文件的。需要开发者自行处理访问上传文件的路由。
以下是实现访问上传文件的示例代码：
// javascriptcn.com 代码示例
router.get('/file/:filename', async ctx => {
const filename = ctx.params.filename;
const filePath = path.join(__dirname, '/uploads', filename);
const stats = fs.statSync(filePath);
if (stats.isFile()) {
ctx.response.attachment(filePath); // 设置响应头，告诉浏览器以附件形式下载文件
ctx.body = fs.createReadStream(filePath); // 将文件流写入响应体
} else {
ctx.throw(404, '文件不存在');
}
});在上面的示例代码中，我们定义了路由 /file/:filename，使用 :filename 动态地获取上传的文件名。然后我们使用 fs 模块读取文件的状态信息，如果文件存在则设置响应头，并将文件流写入响应体中，让浏览器可以直接访问文件。
总结
通过本文的学习，我们了解了如何在 Koa 项目中实现文件上传和保存功能。同时我们也学习了如何通过访问上传的文件，验证文件上传和保存是否成功。
在实际开发中，文件上传功能往往需要较多的安全性和效率方面的考虑，本文仅作为一个基础案例，需要开发者结合具体场景进行改进。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653dd4d37d4982a6eb77f8c3