使用Remix.run(1.16)通过multipart/form-data表单POST发送音频文件

错误根源 #

你的代码里uploadHandler变量未定义，且未传入符合要求的上传处理器函数，导致unstable_parseMultipartFormData抛出uploadHandler2 is not a function错误。Remix的该方法要求第二个参数必须是一个合法的上传处理器函数，或通过Remix工具创建的处理器实例。

修复方案 #

1. 导入并配置官方上传处理器 #

使用Remix内置的createFileUploadHandler创建合规的处理器，它默认将文件存在内存中，也可配置磁盘存储路径：

首先导入所需工具：

import { unstable_parseMultipartFormData, createFileUploadHandler } from "@remix-run/node";

然后在action中创建并使用处理器：

export const action = async ({ request }) => {
  // 创建上传处理器，可自定义存储目录、文件大小限制
  const uploadHandler = createFileUploadHandler({
    directory: "./public/uploads", // 可选：指定本地存储目录
    maxPartSize: 10_000_000, // 可选：限制单个文件最大为10MB
  });

  const formData = await unstable_parseMultipartFormData(request, uploadHandler);
  
  // 获取上传的音频文件
  const audioFile = formData.get("audioFile");
  console.log("上传文件信息:", audioFile);

  // 后续可添加文件存储、格式转换等逻辑
  return new Response("文件上传成功", { status: 200 });
};

2. 简化前端表单代码 #

你手动维护formData状态并调用useSubmit的逻辑是多余的，Remix的<Form>组件会自动处理multipart/form-data提交，无需额外状态管理：

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

export default function Index() {
  return (
    <section>
      <Form encType="multipart/form-data" method="POST">
        <input
          id="fileUpload"
          name="audioFile"
          type="file"
          accept=".mp3,.m4a"
          className="bg-neutral-600 text-white px-4 py-2 rounded-lg mb-4 w-full text-sm"
        />
        <button className="text-white border border-white p-2 rounded-md text-sm" type="submit">Send</button>
      </Form>
    </section>
  );
}

3. 可选：自定义上传处理器 #

如果需要更灵活的处理逻辑（比如上传到云存储），可以自定义处理器函数：

const customUploadHandler = async ({ name, filename, data, contentType }) => {
  // 将文件数据转为Buffer
  const fileBuffer = await data.arrayBuffer();
  // 这里可添加上传到OSS、S3等云存储的逻辑
  return {
    filename,
    contentType,
    buffer: fileBuffer,
  };
};

// 在action中使用自定义处理器
const formData = await unstable_parseMultipartFormData(request, customUploadHandler);

注意事项 #

• unstable_parseMultipartFormData属于Remix的不稳定API，后续版本可能有变更，需关注官方文档更新。
• 使用磁盘存储时，确保目标目录存在且应用有读写权限。
• 生产环境建议添加文件类型校验、恶意文件检测等安全措施。

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