koa-body 中的 fields，为什么起作用？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要处理请求体中的数据。koa-body 是一个用于解析 HTTP 请求体的中间件，它可以将请求体解析为 JSON、form、text、multipart 等格式。在 koa-body 中，fields 是一个重要的参数，它可以用于解析 multipart/form-data 格式的请求体中的表单数据。本文将详细介绍 koa-body 中的 fields 参数，以及它为什么能够起作用。

fields 参数简介

在 koa-body 中，fields 参数用于解析 multipart/form-data 格式的表单数据。它的类型是一个对象，其属性名为表单中的字段名，属性值为一个函数。当解析到该字段时，koa-body 会将该字段的值传递给对应的函数进行处理。处理完成后，函数需要返回一个 Promise 对象，该 Promise 对象的结果将作为该字段的值。例如：

// javascriptcn.com 代码示例
const koaBody = require('koa-body');

app.use(koaBody({
  multipart: true,
  formidable: {
    keepExtensions: true,
    fields: {
      name: (name, field) => {
        return Promise.resolve(name.toUpperCase());
      },
      age: (age, field) => {
        return Promise.resolve(Number(age) + 1);
      }
    }
  }
}));

上面的代码中，我们定义了一个使用 koa-body 的中间件，并指定了 multipart/form-data 格式的表单数据需要通过 formidable 进行解析。在 formidable 的 fields 参数中，我们定义了两个字段，分别为 name 和 age。当解析到 name 字段时，koa-body 会将字段的值传递给 name 函数进行处理。name 函数将字段值转换为大写，并通过 Promise.resolve 返回。同样地，当解析到 age 字段时，koa-body 会将字段的值传递给 age 函数进行处理。age 函数将字段值转换为数字，并加 1，最后通过 Promise.resolve 返回。

fields 参数的原理

在了解 fields 参数的原理之前，我们先来简单介绍一下 multipart/form-data 格式。multipart/form-data 是一种 HTTP 请求体格式，用于在 HTTP 请求中上传文件和表单数据。它允许请求体中包含多个部分，每个部分以 boundary 字符串作为分隔符。在 koa-body 中，fields 参数的作用就是对 multipart/form-data 格式的请求体中的表单数据进行解析。

当 koa-body 解析 multipart/form-data 格式的请求体时，它会将请求体中的每个部分都解析为一个对象，该对象包含以下属性：

fieldName：字段名。
fileName：文件名，如果该部分不是文件，则为 null。
encoding：编码方式，例如 utf8、binary 等。
mimeType：MIME 类型，例如 text/plain、image/jpeg 等。
headers：HTTP 头部信息。
data：数据，如果该部分是文件，则为文件内容；否则为字符串。

在 formidable 的 fields 参数中，我们可以为每个字段指定一个处理函数。当解析到该字段时，koa-body 会将字段的值传递给对应的函数进行处理。处理完成后，函数需要返回一个 Promise 对象，该 Promise 对象的结果将作为该字段的值。在处理函数中，我们可以对字段的值进行任意的处理，例如转换大小写、计算年龄等。

示例代码

下面是一个使用 koa-body 解析 multipart/form-data 格式的表单数据的示例代码。在该示例中，我们定义了一个中间件，用于接收用户上传的头像图片和其他表单数据。在接收到请求后，我们将头像图片保存到本地，并将表单数据存储到数据库中。

// javascriptcn.com 代码示例
const koaBody = require('koa-body');
const fs = require('fs');
const path = require('path');
const User = require('./models/user');

app.use(koaBody({
  multipart: true,
  formidable: {
    keepExtensions: true,
    uploadDir: path.join(__dirname, 'public', 'uploads'),
    fields: {
      name: (name, field) => {
        return Promise.resolve(name);
      },
      age: (age, field) => {
        return Promise.resolve(Number(age));
      }
    }
  }
}));

app.use(async (ctx) => {
  const { name, age, avatar } = ctx.request.body;

  // 将头像保存到本地
  const avatarPath = path.join(__dirname, 'public', 'uploads', avatar.name);
  const stream = fs.createWriteStream(avatarPath);
  stream.write(avatar.data);
  stream.end();

  // 将表单数据存储到数据库中
  const user = new User({ name, age, avatar: avatarPath });
  await user.save();

  ctx.body = '上传成功';
});

在上面的示例中，我们首先使用 koa-body 中间件解析请求体。在 formidable 的 fields 参数中，我们定义了两个字段，分别为 name 和 age。当解析到 name 字段时，koa-body 会将字段的值传递给 name 函数进行处理。name 函数直接返回字段的值。同样地，当解析到 age 字段时，koa-body 会将字段的值传递给 age 函数进行处理。age 函数将字段值转换为数字，并通过 Promise.resolve 返回。

在接收到请求后，我们从请求体中获取表单数据，并将头像图片保存到本地。最后，我们将表单数据存储到数据库中，并返回上传成功的提示信息。

总结

通过本文的介绍，我们了解了 koa-body 中的 fields 参数的作用和原理。在实际开发中，我们可以使用 fields 参数对 multipart/form-data 格式的表单数据进行解析，并对表单数据进行处理。通过合理地使用 fields 参数，我们可以大大提高表单数据的处理效率，从而更好地满足用户的需求。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6551cd4ed2f5e1655db86bff