异步图片上传模式答案

【问题标题】：Async image upload pattern异步图片上传模式
【发布时间】：2012-07-07 22:54:39
【问题描述】：

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

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

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

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

【问题讨论】：

我知道，以wordpress 为例，您上传图片，然后它会进入该特定博客文章的“媒体库”项目。然后，您可以更改描述等并将其插入您正在撰写的帖子中。查看源代码，它可能会给你一些想法。

标签： design-patterns amazon-s3 flask image-uploading

【解决方案1】：

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

因此，从 UI 的角度来看，我们最初只显示缩略图，相对而言下载成本更低。一旦用户点击图像，就会从该图像的元数据中接收到原始图像位置。有了这个，我们只有在用户请求时才能得到原始图像。

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

【讨论】：

【解决方案2】：

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

见http://www.onlywebpro.com/2012/01/24/create-thumbnail-preview-of-images-using-html5-api/

【讨论】：