我可以在哪里临时存储 React 多步骤表单中的文件上传?

Where can I temporarily store file uploads in a React multi step form?

因此,我有一个根据用户的回答动态构建的多步骤表单。创建的表单可以有多个 "file upload" 个步骤。

在概念验证中,我们使用 sessionStorage 来存储来自所有步骤的所有数据。在最后一步,当点击 "submit" 按钮时,所有数据都被发送到服务器。但是,sessionStorage 有一个限制(5MB,如果我没记错的话)。

作为解决方案,我考虑在用户完成 "file upload" 步骤时将所有文件上传(使用 axios 或类似的东西)到服务器端。由于用户可以返回到表单的先前步骤并可能删除一些已发送到服务器的文件,因此我需要在服务器端创建一个删除逻辑,以便反映这些更改。

我正在寻找一种方法来保持当前的行为(一次将所有数据发送到服务器),但在网络上找不到有用的 link。这可能吗?有人可以给我一些建议吗?

向包含所有表单步骤的父组件添加状态,然后将所有表单数据存储在本地状态中。准备好提交后,使用状态值提交。

您可以将文件存储为 React 状态,就像您存储任何其他表单输入一样。该文件将是从 event.target.files

获得的变量