在Next.js中处理multipart/form-data文件：如何获取路径或缓冲区？

我尝试从前端向后端上传图片，但遇到了问题。前端发送包含“image”的数据到后端；后端使用Next.js编写，代码如下：

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


//disabling nextjs default body parser
export const config = {
  api: { bodyParser: false },
};


export async function POST(request) {
   //get data from body
   const formData = await request.formData();

   //get logo image file
   const logo = formData.get('business_logo');
   
   console.log(logo);//output is below

   //default 
   return NextResponse.json(request)
};

控制台输出的logo为：

File {
  size: 686117,
  type: 'image/jpeg',
  name: '102311052-customer moldbase - ZOOM in to obscure customer content.JPEG',
  lastModified: 1721648713221
}

我想获取文件路径或buffer用于后续处理（如上传到BunnyCDN或保存到本地），但尝试用fs.readFile时因为返回的是对象而未成功，该怎么解决？

从formData.get()拿到的logo是浏览器标准的File对象，它没有本地文件路径（前端上传的文件不会暴露本地路径），但你可以直接将它转换为Buffer或读取为数据流来处理：

1. 获取文件Buffer #

调用File对象的arrayBuffer()方法，再转换为Node.js的Buffer：

export async function POST(request) {
  const formData = await request.formData();
  const logo = formData.get('business_logo');

  // 转换为ArrayBuffer后转成Buffer
  const arrayBuffer = await logo.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);

  // 后续可使用buffer完成上传CDN、本地存储等操作
  console.log('文件Buffer长度:', buffer.length);

  return NextResponse.json({ message: '文件处理完成' });
}

2. 保存到本地文件 #

结合Node.js的fs.promises.writeFile，用Buffer写入文件：

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

export const config = {
  api: { bodyParser: false },
};

export async function POST(request) {
  const formData = await request.formData();
  const logo = formData.get('business_logo');

  // 构建保存路径（注意：Next.js生产环境建议用临时目录或云存储，避免文件丢失）
  const savePath = path.join(process.cwd(), 'public/uploads', logo.name);
  
  // 转换为Buffer后写入文件
  const arrayBuffer = await logo.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);
  await fs.writeFile(savePath, buffer);

  return NextResponse.json({ message: '文件保存成功', filePath: savePath });
}

注意：public目录在Next.js生产环境属于静态资源目录，频繁写入可能引发部署问题，推荐使用系统临时目录（os.tmpdir()）或云存储服务。

3. 上传到BunnyCDN #

BunnyCDN支持直接传入Buffer上传，以官方SDK为例（需先安装bunnycdn-storage包）：

import { NextResponse } from 'next/server';
import { Storage } from 'bunnycdn-storage';

export const config = {
  api: { bodyParser: false },
};

export async function POST(request) {
  const formData = await request.formData();
  const logo = formData.get('business_logo');

  // 初始化BunnyCDN存储客户端
  const storage = new Storage(process.env.BUNNYCDN_STORAGE_ZONE, process.env.BUNNYCDN_API_KEY);

  // 转换为Buffer后上传
  const arrayBuffer = await logo.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);
  
  // 上传到BunnyCDN指定路径
  await storage.putFile(`uploads/${logo.name}`, buffer);

  return NextResponse.json({ message: '文件上传到BunnyCDN成功' });
}

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