在为数据库中的帐户创建条目之前如何处理图像上传？

Question

我正在构建一个单页应用程序。

在客户端，我使用的是 Nuxt.js（包括 Vue.js 和 Vuex）。

要向服务器发送和接收数据，我使用 axios。

API 是使用 Django REST 框架构建的。

我有以下场景：

---

---

如果用户想要注册，他从第 1 页开始。 在这里，他可以上传个人资料图片。一旦他选择了图片，它就会自动上传到 S3 存储桶中。

在上传期间或之后，他可以填写其他字段名字和姓氏。 所有这些字段都临时保存在 Vuex 存储中，这意味着如果用户重新加载页面，数据就会消失。

如果他点击下一页，他将被带到另一个页面（另一个 URL；没有页面重新加载 -> 单页应用程序），他可以在其中输入剩余数据。

点击按钮创建帐户后，该条目在数据库中创建。

现在我的问题...我应该如何处理图片上传？ 如前所述，图片应在选择后直接上传，而不仅仅是点击按钮创建帐户。

有时我必须在图像和帐户之间建立关系。

到目前为止，我已经提出了以下解决方案。以下 ER 模型代表我的数据库表。

---

---

如果用户在第 1 页上选择了一张图片，它会立即上传到 S3 存储桶中，并且会在 Image 表中创建一个条目。

API 返回此图像条目的 ID。我将此 ID 保存在临时 Vuex 存储中，以便我可以在 第 2 页 上使用它来将其发送到负责创建帐户的 API 端点。

问题是，Vuex Store 并不“安全”，因为有经验的用户可以通过控制台轻松编辑值。所以他可以将图像条目的 id 更改为他根本没有创建的条目。

有谁知道如何解决这样的问题，或者如果这种方法在创建帐户之前处理图片上传很常见？

（我已经在很多页面上看到过这种情况，但我不知道他们是如何解决的）

Answer 1

最好的方法是添加另一个唯一字段并使用uuid 之类的东西，并使用它代替 id，至少用于注册或接受 id 不够安全的任何地方。或者是临时的蛞蝓或任何无法公开访问或轻易猜到的东西。

您还可以过滤掉没有所有者的图像并接受这些不那么安全的 id，但有人在同一时间获得另一个没有所有者的 id 的机会非常低。 （OFC，如果您定期清除没有所有者的图像）

您还应该担心用户可能会停留在第 2 页，并且您将拥有没有所有者的图像（额外空间）。如果您在图像表中有关系，那么您可以添加一个每 24 小时运行一次的任务，并删除没有所有者的图像，或者从它们的创建经过 X 分钟等。

基本上，当您必须将单个表单分成单独的步骤时，您最终会添加一些功能来进行清理。