unstable_parseMultipartFormData

unstable_parseMultipartFormData

允许您处理应用程序的多部分表单(文件上传)。

了解浏览器文件 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 是整个过程的关键。它负责在从客户端流式传输多部分/表单数据部分时发生的事情。您可以将其保存到磁盘、存储在内存中或充当代理将其发送到其他位置(例如文件存储提供商)。

Remix 提供了两个实用程序来为您创建 uploadHandler

  • unstable_createFileUploadHandler
  • unstable_createMemoryUploadHandler

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

文档和示例根据以下许可获得许可 MIT