Remix服务端文件处理：CDN图片上传实现求助

问题分析 #

原代码直接调用request.formData()处理文件上传，在处理大文件时易引发内存溢出，且未利用Remix提供的unstableMultipartFormData做流式处理。此外，向CDN发起PUT请求时缺少必要请求头，也未正确处理文件流的转发逻辑。

实现步骤 #

1. 配置自定义上传处理器 #

借助Remix的unstable_createFileUploadHandler自定义上传逻辑，直接将文件流转发至CDN，无需本地存储文件。

2. 修改Action逻辑 #

通过unstableMultipartFormData解析表单数据，配合自定义处理器完成CDN上传。

3. 客户端代码调整 #

保留原有提交逻辑，确保表单数据正确传递至服务端Action。

完整代码示例 #

服务端Action代码 #

import { unstable_multipartFormData, unstable_createFileUploadHandler, json } from "@remix-run/node";
import type { ActionArgs } from "@remix-run/node";

const API = "你的CDN基础URL";

// 自定义上传处理器：直接流式转发文件到CDN
const cdnUploadHandler = unstable_createFileUploadHandler({
  async file({ filename, data, contentType }) {
    // 发起CDN PUT请求，直接传递文件流
    const response = await fetch(`${API}/${filename}`, {
      method: "PUT",
      body: data,
      headers: {
        "Content-Type": contentType,
        // 若CDN需要鉴权，在此添加Authorization等请求头
      },
    });

    if (!response.ok) {
      throw new Error(`CDN上传失败：${response.statusText}`);
    }

    // 返回CDN文件地址，该值会存入FormData的对应字段
    return `${API}/${filename}`;
  },
});

export async function action({ request }: ActionArgs) {
  const formData = await unstable_multipartFormData(request, cdnUploadHandler);
  
  // 获取上传后的CDN地址
  const cdnUrl = formData.get("file");
  // 如需其他表单字段，直接通过formData.get获取
  // const fileName = formData.get("fileName");

  return json({ cdnUrl });
}

客户端组件代码 #

import { useFetcher } from "@remix-run/react";

export default function UploadImage() {
  const fetcher = useFetcher();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    const fileData = new FormData();
    fileData.append("file", file);
    fileData.append("fileName", file.name);

    fetcher.submit(fileData, { method: "POST" });
  };

  return (
    <>
      <input type="file" onChange={handleChange} disabled={fetcher.state !== "idle"} />
      {fetcher.state === "loading" && <p>上传中...</p>}
      {fetcher.data?.cdnUrl && <p>上传完成：{fetcher.data.cdnUrl}</p>}
    </>
  );
}

上传处理器参数说明 #

自定义上传处理器的file回调接收以下核心参数：

• name: 表单字段名（示例中为"file"）
• filename: 上传文件的原始文件名
• data: 文件的ReadableStream，可直接作为请求体传递给CDN，实现流式上传
• contentType: 文件的MIME类型（如image/jpeg）

回调返回的值会被自动存入FormData对应的字段中（示例中返回CDN地址，可通过formData.get("file")获取）。

注意事项 #

• 确认CDN支持PUT方式上传，且已配置正确的权限（如签名、Token），必要时在请求头中添加鉴权信息
• unstable_前缀表示API尚未稳定，后续需关注Remix官方更新
• 多文件上传只需在表单中添加多个file字段，处理器会逐个处理

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