nextjs data_error ai_generated true

错误:服务端操作无法直接从 FormData 接收 ArrayBuffer 或 Blob。请使用 File 对象或转换为 base64。

Error: Server Actions cannot receive ArrayBuffer or Blob directly from FormData. Use File objects or convert to base64.

ID: nextjs/server-action-formdata-arraybuffer

其他格式: JSON · Markdown 中文 · English
80%修复率
82%置信度
1证据数
2025-01-10首次发现

版本兼容性

版本状态引入弃用备注
Next.js 14.x active
Next.js 15.x active

根因分析

服务端操作接收到的 FormData 包含 ArrayBuffer 或 Blob 条目,这些类型无法直接序列化用于服务端传输。Next.js 服务端操作仅支持来自 FormData 的 File、string 或 number 类型。

English

A Server Action receives FormData containing ArrayBuffer or Blob entries, which are not directly serializable for server transmission. Next.js Server Actions only support File, string, or number types from FormData.

generic

官方文档

https://nextjs.org/docs/app/api-reference/functions/server-actions

解决方案

  1. 在客户端将 ArrayBuffer 转换为 base64 再附加到 FormData。示例:const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer))); formData.append('file', base64); 然后在服务端操作中解码:const buffer = Buffer.from(base64, 'base64');
  2. 在附加到 FormData 之前将 ArrayBuffer 包装在 File 对象中。示例:const file = new File([arrayBuffer], 'filename.bin'); formData.append('file', file); 服务端操作将接收到一个 File 对象。
  3. 不使用服务端操作,而是通过 fetch POST 请求将数据发送到直接接受二进制数据的 API 路由。

无效尝试

常见但无效的做法:

  1. 90% 失败

    ArrayBuffer is binary data; JSON.parse will fail on it unless it is already a JSON string. This approach also does not address the serialization issue for the Server Action.

  2. 100% 失败

    FormData serialization does not support ArrayBuffer; it will be converted to a string '[object ArrayBuffer]' or cause a TypeError during submission.

  3. 85% 失败

    Next.js Server Actions handle FormData parsing internally before middleware runs. You cannot intercept the request body in middleware for Server Actions.