Next.js13中react-dropzone文件上传失败求助（含前后端代码）

问题根源分析 #

1. Next.js13 App Router请求对象差异：App Router的POST函数接收的是Web标准Request对象，而非Pages Router的NextApiRequest，formidable默认处理Node.js HTTP请求，需手动转换
2. 后端代码逻辑错误：存在提前return语句，导致文件处理代码完全不执行
3. 未禁用默认body解析：Next.js会自动解析请求体，导致formidable无法正确获取multipart/form-data格式的文件数据
4. formidable配置缺失：未指定上传目录，临时文件处理路径可能存在权限或路径问题

前端代码微调（增强健壮性） #

在上传前增加文件存在性校验，避免空文件提交：

const handleFile = async () => {
  if (!acceptedFiles[0]) return alert('请选择文件');
  const formData = new FormData();
  formData.append('file', acceptedFiles[0]);

  try {
    const response = await fetch('/api/courses/0549c28d', {
      method: 'POST',
      body: formData,
      // 无需手动设置Content-Type，浏览器会自动添加正确的boundary
    });

    if (response.ok) {
      alert('文件上传成功');
    } else {
      const errMsg = await response.text();
      alert(`上传失败：${errMsg}`);
    }
  } catch (error) {
    alert(`上传失败：${error}`);
  }
}

后端代码修复（核心） #

关键修改点： #

• 禁用Next.js默认body解析
• 转换Web Request为formidable可处理的格式
• 修正提前return的逻辑错误
• 配置formidable上传目录与文件规则

import { NextResponse } from 'next/server';
import { IncomingForm } from 'formidable';
import fs from 'fs';
import path from 'path';

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

export async function POST(req) {
  try {
    const uploadDir = path.join(process.cwd(), 'public', 'uploads');
    // 确保上传目录存在，不存在则创建
    if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir, { recursive: true });
    }

    // 配置formidable实例
    const form = new IncomingForm({
      uploadDir,
      keepExtensions: true, // 保留原文件扩展名
      maxFileSize: 2 * 1024 * 1024 * 1024, // 2GB，与前端限制一致
    });

    // 解析请求，将Web Request转换为formidable可处理的格式
    const formData = await new Promise((resolve, reject) => {
      form.parse(req, (err, fields, files) => {
        if (err) reject(err);
        resolve({ fields, files });
      });
    });

    const { files } = formData;
    // 处理formidable可能返回的文件数组（多文件场景）
    const file = Array.isArray(files.file) ? files.file[0] : files.file;

    if (!file) {
      return new NextResponse("未上传文件", { status: 400 });
    }

    // 重命名临时文件为原文件名
    const targetPath = path.join(uploadDir, file.originalFilename);
    // 避免覆盖已存在文件
    if (fs.existsSync(targetPath)) {
      return new NextResponse("文件已存在", { status: 409 });
    }
    fs.renameSync(file.filepath, targetPath);

    return NextResponse.json({ 
      success: true, 
      filename: file.originalFilename,
      accessPath: `/uploads/${file.originalFilename}`
    });
  } catch (error) {
    console.log("[UPLOAD_ERROR]", error);
    return new NextResponse(`内部错误：${error.message}`, { status: 500 });
  }
}

额外注意事项 #

• 生产环境不建议直接保存文件到public目录，Vercel等平台的静态目录不支持持久化上传文件，建议使用云存储服务（如AWS S3、阿里云OSS）
• 前端isValidFileType逻辑可简化：react-dropzone的acceptedFiles已经是符合类型要求的文件，onDrop中直接设置setIsValidFileType(acceptedFiles.length > 0)即可

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