React Router v7 已发布。 查看文档
unstable_parseMultipartFormData

unstable_parseMultipartFormData

允许你为你的应用程序处理 multipart 形式(文件上传)。

理解 浏览器 File API 以了解如何使用此 API 会很有帮助。

它将用来代替 request.formData()

- const formData = await request.formData();
+ const formData = await unstable_parseMultipartFormData(request, uploadHandler);

例如

export const action = async ({
  request,
}: ActionFunctionArgs) => {
  const formData = await unstable_parseMultipartFormData(
    request,
    uploadHandler // <-- we'll look at this deeper next
  );

  // the returned value for the file field is whatever our uploadHandler returns.
  // Let's imagine we're uploading the avatar to s3,
  // so our uploadHandler returns the URL.
  const avatarUrl = formData.get("avatar");

  // update the currently logged in user's avatar in our database
  await updateUserAvatar(request, avatarUrl);

  // success! Redirect to account page
  return redirect("/account");
};

export default function AvatarUploadRoute() {
  return (
    <Form method="post" encType="multipart/form-data">
      <label htmlFor="avatar-input">Avatar</label>
      <input id="avatar-input" type="file" name="avatar" />
      <button>Upload</button>
    </Form>
  );
}

要读取上传文件的内容,请使用它从 Blob API 继承的方法之一。例如,.text() 异步返回文件的文本内容,而 .arrayBuffer() 返回二进制内容。

uploadHandler

uploadHandler 是整个过程的关键。它负责处理 multipart/form-data 部分从客户端流式传输时的处理方式。你可以将其保存到磁盘,存储在内存中,或者充当代理将其发送到其他地方(例如文件存储提供商)。

Remix 有两个实用工具可以为你创建 uploadHandler

  • unstable_createFileUploadHandler
  • unstable_createMemoryUploadHandler

这些是功能齐全的实用工具,用于处理相当简单的用例。不建议将除了很小的文件以外的任何内容加载到内存中。将文件保存到磁盘是许多用例的合理解决方案。但是,如果要将文件上传到文件托管提供商,则需要编写自己的代码。

文档和示例在以下许可下 MIT