前言
对于前端开发人员来说，使用 FormData 对象来上传文件是司空见惯的事情了。然而，当我们使用 Koa2 来处理 FormData 数据的时候，却可能会遇到一些困难。在这篇文章中，我们将会详细讨论如何在 Koa2 中处理 FormData 数据，以及如何在实际开发项目中应用这些技术。
FormData 概述
首先，我们来简单了解一下 FormData。FormData 对象提供了一个简单的方式来将数据组装成键值对，这些键值对可以直接用于 Ajax 请求或通过 XMLHttpRequest.send() 方法来提交表单数据。与普通的表单相比， FormData 对象的最大优势是能够轻松地实现文件上传。
Koa2 中的 FormData
在 Koa2 中处理 FormData 数据与处理其他表单数据的方法相同。对于传统的表单数据，我们可以使用 koa-bodyparser 来处理。然而，由于 FormData 数据中包含了文件信息，它需要使用不同的方式来处理。
使用 koa-body 中间件
首先让我们看看如何使用 koa-body 中间件来处理 FormData 数据。
// www.javascriptcn.com code example
const Koa = require('koa');
const koaBody = require('koa-body');
const app = new Koa();
app.use(koaBody());
app.use(async (ctx, next) => {
if (ctx.method !== 'POST') return next();
const body = ctx.request.body;
console.log(body);
ctx.body = body;
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});在上面的代码中，我们首先使用 koa-body 中间件来解析请求体。当请求方法为 POST 时，我们通过 ctx.request.body 取得请求体中的内容，并将其输出到控制台。最后，我们将请求体返回给客户端。
现在，我们可以使用 FormData 对象来发送一个文件上传请求：
// www.javascriptcn.com code example
const formData = new FormData();
formData.append('username', 'john');
formData.append('avatar', fileInput.files[0]);
fetch('/upload', {
method: 'POST',
body: formData
}).then(response => {
console.log(response.status);
});当我们向 /upload 路由发送这个请求时，可以看到控制台输出了请求体的内容。其中，文件上传部分的字段名为 avatar，文件内容存储在了 avatar 的值中。
这种方式可以处理大多数的情况，但是如果我们需要实现像 Multer 那样的效果，还需要进行一些额外的操作。
手动处理 FormData 数据
当我们需要处理 FormData 数据时，我们需要使用 Node.js 原生的 Busboy 库来读取请求体中的数据。Busboy 库是一个处理文件上传的 Node.js 模块，可以从 HTTP 请求中获取所有文件和字段数据。让我们来看一个使用 Busboy 库处理 FormData 数据的例子：
// www.javascriptcn.com code example
const Koa = require('koa');
const fs = require('fs');
const Busboy = require('busboy');
const path = require('path');
const app = new Koa();
app.use(async (ctx, next) => {
// Return early if this is not a POST request
if (ctx.method !== 'POST') return next();
const busboy = new Busboy({ headers: ctx.req.headers });
busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
const saveTo = path.join(__dirname, 'uploads', filename);
file.pipe(fs.createWriteStream(saveTo));
});
busboy.on('field', function(key, value) {
console.log(`${key}: ${value}`);
});
busboy.on('finish', function() {
ctx.body = 'File upload complete!';
});
ctx.req.pipe(busboy);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});在这段代码中，我们创建了一个 Busboy 实例，然后将请求头传递给了 Busboy。当 Busboy 检测到一个文件时，它会创建一个新的可写流，并将文件存储到硬盘上。当 Busboy 检测到一个字段时，它会输出该字段的值。当整个请求完成时，Busboy 触发 finish 事件，然后我们将信息返回给客户端。
现在，我们可以用类似下面的代码来发送表单：
// www.javascriptcn.com code example
const formData = new FormData();
formData.append('username', 'john');
formData.append('avatar', fileInput.files[0]);
fetch('/upload', {
method: 'POST',
body: formData
}).then(response => {
console.log(response.status);
});当我们向 /upload 路由发送这个请求时，可以看到文件成功上传到了服务器：
$ ls uploads 7HFj1Ah8GgoM9m0l.jpg
综述
本文中，我们介绍了如何在 Koa2 中处理 FormData 数据。我们首先使用了 koa-body 中间件来处理请求体，这种方式可以处理大多数情况。但是如果我们需要手动处理 FormData 数据，我们需要使用 Node.js 原生的 Busboy 库来读取请求体中的数据。
通过这篇文章，我们希望读者能够更好地了解如何在 Koa2 中处理 FormData 数据，并能够在实际开发项目中应用这些技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfa431e46428fe9eb5bfee