在React/Next.js中向Server Action传递图片文件是否可行及实现方法？

问题1：如何向Server Action传递文件（含字节数组示例） #

Server Action不支持直接传递File类实例，因为它不属于可序列化的普通对象。以下是两种可行的解决方式：

方法1：使用FormData传递（推荐） #

这种方式更贴合文件上传场景，且支持流式处理以降低内存消耗：

page.tsx（前端）

'use client'

import { uploadServerAction } from "./storageStuff";
import React, { ChangeEventHandler, MouseEventHandler, useState } from "react";

export default function Home() {
  const [file, setFile] = useState<File | null>(null);

  const handleFileChange: ChangeEventHandler<HTMLInputElement> = (e) => {
    e.preventDefault();
    setFile(e.target.files?.[0] || null);
  };

  const handleUpload: MouseEventHandler<HTMLButtonElement> = async (e) => {
    e.preventDefault();
    if (!file) return;

    const formData = new FormData();
    formData.append('image', file);
    await uploadServerAction(formData);
  };

  return (
    <>
      <div>
        <input type="file" accept="image/*" onChange={handleFileChange} />
        <button type="button" onClick={handleUpload} disabled={!file}>
          Upload Image
        </button>
      </div>
    </>
  );
}

storageStuff.ts（Server Action）

'use server'

export async function uploadServerAction(formData: FormData) {
  const file = formData.get('image') as File;
  if (!file) throw new Error('未选择文件');

  // 示例：获取文件基础信息
  console.log('文件名:', file.name);
  console.log('文件大小:', file.size);
  
  // 流式处理（推荐）：直接将文件流传给存储服务
  const fileStream = file.stream();
  // 此处替换为你的存储服务上传逻辑（如S3 putObject、Cloudinary上传等）
}

方法2：转成字节数组传递 #

如果需要用字节数组格式传递，可将File转成普通数组（TypedArray无法直接序列化）：

page.tsx（前端修改handleUpload）

const handleUpload: MouseEventHandler<HTMLButtonElement> = async (e) => {
  e.preventDefault();
  if (!file) return;

  // 将File转成可序列化的字节数组
  const arrayBuffer = await file.arrayBuffer();
  const byteArray = Array.from(new Uint8Array(arrayBuffer));
  
  await uploadServerAction({
    fileName: file.name,
    mimeType: file.type,
    byteArray: byteArray
  });
};

storageStuff.ts（Server Action）

'use server'

interface FileData {
  fileName: string;
  mimeType: string;
  byteArray: number[];
}

export async function uploadServerAction(fileData: FileData) {
  // 将字节数组转回Uint8Array用于后续处理
  const uint8Array = new Uint8Array(fileData.byteArray);
  const blob = new Blob([uint8Array], { type: fileData.mimeType });
  
  console.log('文件名:', fileData.fileName);
  console.log('文件大小:', uint8Array.length);
  // 此处替换为你的存储服务上传逻辑
}

注意：字节数组方式会将整个文件加载到前端内存再序列化传输，大文件场景下性能较差，优先推荐FormData方式。

问题2：Server Action处理文件上传是否属于错误用法？ #

这种用法完全符合Next.js的设计预期。Server Action的核心作用就是承载需要在服务器端执行的敏感逻辑（如涉及存储凭证的操作），避免前端暴露敏感信息。

关于服务器内存消耗：

• 若直接将整个文件读入内存（如字节数组方式），大文件会占用较多内存；
• 但采用FormData配合流式处理（如file.stream()获取可读流，直接传给存储服务的流式上传接口），可以避免将整个文件加载到内存，内存消耗与传统API路由处理文件上传一致，不会有额外负担。

因此只要采用流式处理，就无需担心内存问题，这是合理且推荐的用法。

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