在 Web 开发中，文件下载和文件上传是非常常见的功能，对于前端开发者来说，了解如何在 Koa2 中实现这些功能是非常重要的。本文将介绍如何在 Koa2 中实现文件下载和文件上传功能，包括详细的代码示例和指导意义。
文件下载
在 Koa2 中实现文件下载功能非常简单，只需要使用 Node.js 的 fs 模块读取文件内容，然后将文件内容发送给客户端即可。以下是示例代码：
// javascriptcn.com 代码示例
const Koa = require('koa');
const Router = require('koa-router');
const fs = require('fs');
const app = new Koa();
const router = new Router();
router.get('/download', async (ctx) => {
const filePath = './file.txt';
const fileContent = await new Promise((resolve, reject) => {
fs.readFile(filePath, (err, data) => {
if (err) {
reject(err);
} else {
resolve(data);
}
});
});
ctx.response.set('Content-disposition', 'attachment;filename=file.txt');
ctx.response.body = fileContent;
});
app.use(router.routes());
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});在上面的示例代码中，我们定义了一个 GET 请求 /download，当客户端请求该接口时，服务器会读取当前目录下的 file.txt 文件，并将其内容作为响应体发送给客户端。同时，我们还设置了响应头 Content-disposition，该头部告诉浏览器将响应体作为附件进行下载。
在实际开发中，我们可能需要根据不同的文件类型设置不同的 MIME 类型，以便浏览器正确解析文件类型。以下是一些常见的 MIME 类型：
text/plain：纯文本文件text/html：HTML 文件text/css：CSS 文件text/javascript、application/javascript：JavaScript 文件image/jpeg、image/png、image/gif：图片文件application/pdf：PDF 文件application/zip：ZIP 压缩文件
我们可以使用 ctx.response.set 方法设置响应头中的 Content-type 字段，如下所示：
ctx.response.set('Content-type', 'application/pdf');文件上传
在 Koa2 中实现文件上传功能也非常简单，只需要使用 koa-body 中间件解析请求体，然后将上传的文件保存到指定的目录即可。以下是示例代码：
// javascriptcn.com 代码示例
const Koa = require('koa');
const Router = require('koa-router');
const koaBody = require('koa-body');
const path = require('path');
const app = new Koa();
const router = new Router();
router.post('/upload', koaBody({
multipart: true,
formidable: {
uploadDir: path.join(__dirname, 'uploads'),
keepExtensions: true,
},
}), async (ctx) => {
const file = ctx.request.files.file;
ctx.response.body = {
success: true,
message: '上传成功',
data: {
url: `http://localhost:3000/uploads/${file.name}`,
},
};
});
app.use(router.routes());
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});在上面的示例代码中，我们定义了一个 POST 请求 /upload，当客户端上传文件时，服务器会将文件保存到当前目录下的 uploads 目录中，并返回上传成功的信息及文件的 URL 地址。其中，我们使用了 koa-body 中间件来解析请求体，该中间件支持解析文件上传、JSON、表单等多种类型的请求体。同时，我们还使用了 path 模块来拼接保存文件的目录，以及设置了 keepExtensions 选项来保留文件的扩展名。
在实际开发中，我们可能需要对上传的文件进行一些限制，如文件大小、文件类型等。koa-body 中间件提供了一些选项来限制上传的文件，如 maxFileSize、allowedFileTypes 等。以下是示例代码：
// javascriptcn.com 代码示例
router.post('/upload', koaBody({
multipart: true,
formidable: {
uploadDir: path.join(__dirname, 'uploads'),
keepExtensions: true,
maxFileSize: 10 * 1024 * 1024, // 10MB
allowedFileTypes: ['image/jpeg', 'image/png', 'image/gif'],
},
}), async (ctx) => {
// ...
});在上面的示例代码中，我们设置了最大文件大小为 10MB，以及允许上传的文件类型为 JPEG、PNG 和 GIF 图片文件。
总结
在本文中，我们介绍了在 Koa2 中实现文件下载和文件上传功能的方法，包括详细的代码示例和指导意义。文件下载和文件上传是 Web 开发中非常常见的功能，了解如何实现这些功能对于前端开发者来说是非常重要的。同时，我们还介绍了一些常见的 MIME 类型和文件上传的限制选项，希望读者能够从中受益。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6555eeb2d2f5e1655d05f445