Design patterns 异步图像上传模式

上下文： 我正在建立一个网站，在这里，用户上传一张图片，作为列出项目过程的一部分。我想向他们展示上传表单中的图像预览，因为它既美观又有助于用户上传和描述他们的项目

问题： 为了显示图像的预览，我需要将其上传到我的服务器，因为浏览器的沙盒（我无法将图像数据导入JS，除非提交文件输入表单）。但是，我们使用基于用户输入的数据的标识符来存储图像，以保持它们的有序性（在我们的例子中，我们清理名称并将其用作/useruploads/user_id文件夹中的文件名）

虽然我可以更改文件的命名方案，以消除用户输入的依赖性（即sha1文件），但上传到s3并调整图像大小是一项昂贵的操作，我不想不必要地占用资源。如果我上传图像时没有调整大小并生成缩略图，那么在提交包含项目信息的表单后，应用程序将不得不从S3流式传输数据，调整大小并生成缩略图，然后重新上传图像，这似乎有些迂回

---

我觉得这是一个非常常见的问题，我想知道是否有人对如何处理图像上传有任何模式或建议。

大多数服务都会有一个专用位置，在您上传图像时自动存储缩略图。在我的服务中，我也将原始图像存储在s3上，并将对应的虚拟路径映射到它的缩略图，并将其存储在缩略图图像的用户元数据中

因此，从UI的角度来看，我们最初只显示缩略图，相对而言下载成本更低。用户单击图像后，将从此图像的元数据接收原始图像位置。这样，我们只有在用户请求时才能获得原始图像

---

当原始图像被请求并在容器中呈现时，图像的大小调整也可以在下载时完成

使用FileReader API，您实际上可以从磁盘读取二进制blob，然后在提交表单之前纯粹在客户端使用该映像

请参见

我知道，例如，您上载图像，然后它进入特定博客文章的“媒体库”。然后，您可以更改描述等，并将其插入到您正在撰写的文章中。看看源代码，它可能会给你一些想法。