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