如何在转发multipart/form-data前添加字段？NextJS实现咨询

核心思路 #

Next.js默认不会自动解析multipart/form-data类型的请求体，所以需要借助第三方库解析原始请求，重新构建包含userId的FormData后再转发到存储服务器。

步骤1：安装依赖 #

首先安装formidable用于解析multipart请求：

npm install formidable
# 或使用yarn
yarn add formidable

步骤2：修改API路由代码 #

替换原有代码，实现解析请求、添加userId、转发的完整逻辑：

import { NextApiRequest, NextApiResponse } from 'next';
import { getServerSession } from 'next-auth/next';
import { nextAuthOptions } from '../auth/[...nextauth]'; // 替换为你的NextAuth配置路径
import formidable from 'formidable';

// 禁用Next.js默认的body解析，改用formidable处理
export const config = {
  api: {
    bodyParser: false,
  },
};

const createResource = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method !== 'POST') {
    return res.status(405).send('Method Not Allowed');
  }

  const session = await getServerSession(req, res, nextAuthOptions);
  if (!session?.user?.id) { // 假设session.user中包含userId，根据实际结构调整
    return res.status(403).json({ content: '需要登录才能访问此路由' });
  }

  // 解析原始multipart请求
  const form = new formidable.IncomingForm();
  form.parse(req, async (err, fields, files) => {
    if (err) {
      return res.status(500).json({ content: '请求解析失败' });
    }

    // 构建新的FormData，添加userId
    const newFormData = new FormData();
    newFormData.append('userId', session.user.id);

    // 追加原请求中的所有字段
    Object.entries(fields).forEach(([key, value]) => {
      if (Array.isArray(value)) {
        value.forEach(item => newFormData.append(key, item));
      } else {
        newFormData.append(key, value);
      }
    });

    // 追加原请求中的文件（这里假设文件字段名为'file'，根据实际情况修改）
    if (files.file) {
      const fileList = Array.isArray(files.file) ? files.file : [files.file];
      fileList.forEach(file => {
        const fileBlob = new Blob([require('fs').readFileSync(file.filepath)], {
          type: file.mimetype,
        });
        newFormData.append('file', fileBlob, file.originalFilename);
      });
    }

    try {
      // 转发到文件存储服务器
      const uploadRes = await fetch('http://107.155.121.13:8080/upload', {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${process.env.FILE_TOKEN}`,
          // 不要手动设置Content-Type，fetch会自动生成带正确边界的头
        },
        body: newFormData,
      });

      if (!uploadRes.ok) throw new Error('文件上传至存储服务器失败');
      res.status(200).send('ok');
    } catch (error) {
      console.error(error);
      res.status(500).json({ content: '转发请求失败' });
    }
  });
};

export default createResource;

关键注意事项 #

• 必须禁用Next.js默认的bodyParser，否则formidable无法正确解析multipart请求
• 转发时不要手动设置Content-Type，fetch会自动处理multipart/form-data的边界参数
• 注意处理formidable返回的字段/文件可能为数组的情况（比如多个同名字段）

内容的提问来源于stack exchange，提问作者Plee