如何在 Fastify 应用中处理 FormData

在前端开发中，处理表单(Form)数据是非常常见的任务。表单数据的传输方式有多种，其中 FormData 是一种比较常用的方式。在 Fastify 应用中处理 FormData 数据，需要使用 fastify-multipart 插件和 formidable 库。

fastify-multipart 插件介绍

fastify-multipart 是 Fastify 的一个插件，它可以帮助我们处理 multipart/form-data 格式的数据。它基于 fastify-formbody 插件，但是能够更好地支持文件上传等处理逻辑。

formidable 库介绍

formidable 是一个 Node.js 的第三方库，它可以处理 POST 请求、文件上传等任务。因为 Fastify 使用了自己的 multipart 实现，而不是使用 Node.js 自带的，因此我们需要在 Fastify 中使用 formidable 库来解析上传的文件。

如何使用 fastify-multipart 和 formidable

首先，我们需要先安装 fastify-multipart 和 formidable：

npm install fastify-multipart formidable

然后，在 Fastify 应用中注册 fastify-multipart 插件：

const fastify = require('fastify')();

fastify.register(require('fastify-multipart'));

接着，在路由中获取表单数据和上传的文件：

// javascriptcn.com 代码示例
fastify.post('/upload', async (req, reply) => {
  const form = req.multipart();
  const fields = {};
  const filePromises = [];

  form.on('field', (name, value) => {
    fields[name] = value;
  });

  form.on('file', (name, file) => {
    const filePromise = new Promise((resolve, reject) => {
      const chunks = [];
      file.on('data', (chunk) => {
        chunks.push(chunk);
      });

      file.on('end', () => {
        const buffer = Buffer.concat(chunks);
        resolve({
          name: file.name,
          type: file.type,
          data: buffer,
        });
      });

      file.on('error', (err) => {
        reject(err);
      });
    });

    filePromises.push(filePromise);
  });

  form.on('error', (err) => {
    reply.send(err);
  });

  form.on('aborted', () => {
    reply.code(500).send('Aborted');
  });

  form.on('close', async () => {
    const files = await Promise.all(filePromises);
    console.log('Fields:', fields);
    console.log('Files:', files);
    reply.code(200).send('Success');
  });
});

代码中，我们使用 req.multipart() 获取 form 对象，然后监听 field、file 等事件，从而获取表单数据和上传的文件。在 file 事件中，我们使用 Promise 对象处理上传的文件，以便在文件上传完成后获取文件相关信息并返回给客户端。

总结

在 Fastify 应用中处理 FormData 数据，我们需要使用 fastify-multipart 插件和 formidable 库。在路由中，使用 req.multipart() 获取 form 对象，然后监听 field、file 等事件，从而获取表单数据和上传的文件。在 file 事件中，我们使用 Promise 对象处理上传的文件，以便在文件上传完成后获取文件相关信息并返回给客户端。

通过这篇文章，我们了解了如何在 Fastify 应用中处理 FormData 数据，这对于前端开发中处理表单数据和文件上传等任务是非常有用的。

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