在前端开发中，文件上传和下载是非常常见的操作。本文将介绍如何使用 Koa2 框架和 AJAX 请求实现文件上传和下载的功能。
一、文件上传
1.1 前端代码
在前端，我们需要通过表单来上传文件。在 HTML 中，我们可以使用 input 标签来实现文件上传：
<form enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="上传"> </form>
在这个表单中，我们使用了 enctype="multipart/form-data" 属性来指定表单的编码方式为文件上传。并且，我们使用了 input 标签的 type="file" 属性来创建一个文件选择框。当用户选择了文件后，点击提交按钮，表单会自动向服务器发送一个 POST 请求。
1.2 后端代码
在后端，我们需要使用 Koa2 框架来处理文件上传请求。Koa2 提供了一个名为 koa-body 的中间件，可以帮助我们处理文件上传请求。
首先，我们需要安装 koa-body 中间件：
npm install koa-body --save
然后，在 Koa2 应用中使用 koa-body 中间件：
// javascriptcn.com 代码示例
const Koa = require('koa');
const koaBody = require('koa-body');
const app = new Koa();
app.use(koaBody({
multipart: true,
formidable: {
maxFileSize: 200 * 1024 * 1024 // 上传文件大小限制，默认2M
}
}));
app.use(async (ctx) => {
const file = ctx.request.files.file; // 获取上传的文件
// 处理上传的文件
});在上面的代码中，我们先使用 koa-body 中间件来处理文件上传请求。multipart: true 表示启用文件上传功能，formidable 配置选项用于配置文件上传的参数，例如上传文件的大小限制。
在处理上传文件的代码中，我们通过 ctx.request.files.file 来获取上传的文件。接着，我们可以根据业务需求，对上传的文件进行处理。
1.3 完整代码
前端代码：
// javascriptcn.com 代码示例
<form enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="上传">
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(form);
fetch('/upload', {
method: 'POST',
body: formData
}).then(response => {
// 处理上传成功的响应
}).catch(error => {
// 处理上传失败的响应
});
});
</script>后端代码：
// javascriptcn.com 代码示例
const Koa = require('koa');
const koaBody = require('koa-body');
const app = new Koa();
app.use(koaBody({
multipart: true,
formidable: {
maxFileSize: 200 * 1024 * 1024 // 上传文件大小限制，默认2M
}
}));
app.use(async (ctx) => {
const file = ctx.request.files.file; // 获取上传的文件
// 处理上传的文件
});
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});二、文件下载
2.1 前端代码
在前端，我们可以使用 AJAX 请求来下载文件。
// javascriptcn.com 代码示例
fetch('/download', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
fileName: 'example.docx'
})
}).then(response => {
response.blob().then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'example.docx';
a.click();
window.URL.revokeObjectURL(url);
});
}).catch(error => {
// 处理下载失败的响应
});在上面的代码中，我们通过 AJAX 请求向服务器发送一个 POST 请求，并传递了要下载的文件名。当服务器返回响应后，我们使用 response.blob() 方法将响应转换为 Blob 对象。接着，我们可以使用 window.URL.createObjectURL() 方法将 Blob 对象转换为 URL，然后创建一个 a 标签，设置 href 属性为 URL，设置 download 属性为要下载的文件名，最后使用 a.click() 方法触发下载。
2.2 后端代码
在后端，我们需要使用 Koa2 框架来处理文件下载请求。
// javascriptcn.com 代码示例
const Koa = require('koa');
const fs = require('fs');
const path = require('path');
const app = new Koa();
app.use(async (ctx) => {
const fileName = ctx.request.body.fileName;
const filePath = path.join(__dirname, 'files', fileName);
const fileStream = fs.createReadStream(filePath);
ctx.set('Content-disposition', `attachment; filename=${fileName}`);
ctx.body = fileStream;
});
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});在上面的代码中，我们首先获取 AJAX 请求中传递的要下载的文件名。接着，我们根据文件名，读取文件内容，并将文件内容作为响应体返回给客户端。最后，我们设置响应头 Content-disposition，告诉浏览器要下载文件，并设置文件名。
2.3 完整代码
前端代码：
// javascriptcn.com 代码示例
fetch('/download', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
fileName: 'example.docx'
})
}).then(response => {
response.blob().then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'example.docx';
a.click();
window.URL.revokeObjectURL(url);
});
}).catch(error => {
// 处理下载失败的响应
});后端代码：
// javascriptcn.com 代码示例
const Koa = require('koa');
const fs = require('fs');
const path = require('path');
const app = new Koa();
app.use(async (ctx) => {
const fileName = ctx.request.body.fileName;
const filePath = path.join(__dirname, 'files', fileName);
const fileStream = fs.createReadStream(filePath);
ctx.set('Content-disposition', `attachment; filename=${fileName}`);
ctx.body = fileStream;
});
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});三、总结
通过本文的介绍，我们了解了如何使用 Koa2 框架和 AJAX 请求实现文件上传和下载的功能。在实际开发中，我们可以根据业务需求，对文件上传和下载的功能进行扩展，例如对上传的文件进行格式验证、对下载的文件进行权限验证等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655c47a9d2f5e1655d660900