Next.js 14传递大图片时Server Action无法运行的问题求助

核心问题定位 #

你的情况大概率是Vercel Hobby套餐的Server Action（本质是Serverless函数）请求体大小限制导致的：

• Vercel Hobby计划下，Serverless函数的请求体大小默认限制为4.5MB，当你上传的图片总大小+其他表单数据接近或超过这个阈值时，Vercel会直接拦截请求，你的Server Action根本不会执行，所以客户端拿到的是undefined，进而触发解构错误。
• 这也解释了为什么Server Action第一行的console.warn("A")没出现在Vercel日志里——请求压根没到你的代码层面。

具体解决办法 #

1. 拆分文件上传与数据提交流程
   不要直接把图片文件通过FormData传给Server Action，改为先将图片上传到存储服务（比如Vercel Blob、AWS S3等），拿到图片的URL后，再把URL和其他产品数据一起传给Server Action。这样Server Action只处理文本数据，不会触发请求大小限制。

2. 添加客户端请求错误捕获
   当前代码只处理了Server Action返回的errorMessage，但如果请求被Vercel拦截（比如超大小限制），await会直接抛出错误，需要在外层加try-catch捕获这类请求级别的错误：

startTransition(async () => {
  console.warn("Start Transition");
  try {
    const boundFormData = new FormData();
    // add images files to form data
    for (const imageUrl of imageUrls) {
      const imageFile = await convertBlobUrlToFile(imageUrl);
      boundFormData.append("imageFiles", imageFile);
    }

    const boundAddProductAction = addProductAction.bind(null, boundFormData);
    console.warn("Before Action");

    const { errorMessage } = await boundAddProductAction(formData);

    console.warn("After Action");

    if (!errorMessage) {
      setModalState((prev) => ({ ...prev, isOpen: false }));
      toast.success("Product successfully added");
    } else {
      toast.error(errorMessage);
    }
  } catch (err) {
    console.error("上传请求失败:", err);
    toast.error("上传失败，请检查文件总大小是否超过限制或重试");
  }
});

3. 确认Server Action参数绑定正确性
   检查addProductAction的参数定义是否和你绑定的参数顺序匹配：

// 确保Server Action的参数顺序和绑定一致
export async function addProductAction(imageFormData: FormData, productFormData: FormData) {
  // ... 你的业务逻辑
}

如果参数顺序错误，可能导致处理逻辑异常，但这和文件大小无关，属于基础校验。

4. 调整Vercel日志查看方式
   Vercel控制台默认可能过滤了warn级别的日志，把Server Action里的console.warn("A")改成console.log("A")，或者在Vercel日志页面调整过滤条件，确认请求是否真的到达了Server Action。

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