错误:服务端操作无法直接从 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
版本兼容性
| 版本 | 状态 | 引入 | 弃用 | 备注 |
|---|---|---|---|---|
| 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.
官方文档
https://nextjs.org/docs/app/api-reference/functions/server-actions解决方案
-
在客户端将 ArrayBuffer 转换为 base64 再附加到 FormData。示例:const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer))); formData.append('file', base64); 然后在服务端操作中解码:const buffer = Buffer.from(base64, 'base64'); -
在附加到 FormData 之前将 ArrayBuffer 包装在 File 对象中。示例:const file = new File([arrayBuffer], 'filename.bin'); formData.append('file', file); 服务端操作将接收到一个 File 对象。 -
不使用服务端操作,而是通过 fetch POST 请求将数据发送到直接接受二进制数据的 API 路由。
无效尝试
常见但无效的做法:
-
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.
-
100% 失败
FormData serialization does not support ArrayBuffer; it will be converted to a string '[object ArrayBuffer]' or cause a TypeError during submission.
-
85% 失败
Next.js Server Actions handle FormData parsing internally before middleware runs. You cannot intercept the request body in middleware for Server Actions.