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 是整个过程的关键。它负责处理从客户端流式传输的 multipart/form-data 部分。您可以将其保存到磁盘、存储在内存中，或充当代理将其发送到其他地方（如文件存储提供商）。

Remix 有两个实用程序可以为您创建 uploadHandler：

unstable_createFileUploadHandler
unstable_createMemoryUploadHandler

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