Next.js 13 Server Actions中FormData传文件至Cloudinary报错及咨询

问题根源 #

你遇到的错误核心在于两点：

1. 客户端的blob:nodedata:...是浏览器生成的本地临时URL，仅在当前浏览器会话中有效，服务端无法通过这个URL获取文件内容。
2. 服务端代码中image.toString()会将File对象转为文件名（比如nature.jpg），而Cloudinary SDK尝试在服务端本地查找这个文件，自然会出现ENOENT（文件不存在）错误——因为服务端并没有这个本地文件，只有内存中的File对象。

客户端与服务端FormData的差异 #

• 客户端：FormData中的File对象是浏览器从本地文件系统读取的文件，Blob URL是浏览器为本地预览生成的临时路径，仅客户端可访问，不会随FormData提交到服务端。
• 服务端：Next.js Server Actions会自动解析表单中的文件，生成符合Web File API的File对象，但这个对象没有本地文件路径，仅包含文件的元数据（名称、大小、类型）和二进制内容的访问接口（如arrayBuffer()、stream()）。

解决方案 #

1. 修正Server Action代码，正确处理File对象 #

不要将File对象转为文件名，而是读取其二进制内容（Buffer），再传递给Cloudinary SDK。

首先确保安装Cloudinary SDK：

npm install cloudinary

配置Cloudinary（建议通过环境变量设置，在.env.local中添加）：

CLOUDINARY_CLOUD_NAME=你的云名称
CLOUDINARY_API_KEY=你的API密钥
CLOUDINARY_API_SECRET=你的API密钥

修改Server Action代码：

import { v2 as cloudinary } from 'cloudinary';

// 初始化Cloudinary
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

export const uploadToCloudinary = async (formData: FormData) => {
  'use server'; // 必须声明为服务端动作

  const image = formData.get('image') as File;
  if (!image) throw new Error('未选择图片');

  // 将File对象转为Buffer
  const arrayBuffer = await image.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);

  try {
    // 使用upload_stream上传Buffer
    const uploadResult = await new Promise((resolve, reject) => {
      cloudinary.uploader.upload_stream(
        { 
          resource_type: 'image',
          public_id: image.name.split('.')[0] // 自定义文件ID，可选
        },
        (error, result) => {
          if (error) reject(error);
          else resolve(result);
        }
      ).end(buffer);
    });

    console.log('上传成功:', uploadResult);
    return uploadResult;
  } catch (error) {
    console.error('上传失败:', error);
    throw error; // 抛出错误让客户端处理
  }
};

2. 客户端表单无需额外修改 #

你当前的客户端表单代码是正确的，Next.js会自动将表单中的文件作为File对象传递给Server Action，无需手动处理FormData的构建。

关键注意事项 #

• 必须在Server Action中添加'use server'指令，确保代码在服务端运行。
• 服务端的File对象没有本地路径，必须通过arrayBuffer()或stream()获取二进制内容后再上传。
• Cloudinary的upload_stream方法适合处理Buffer数据，是Node.js环境下上传内存中文件的最佳方式。

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