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