异步图像上传模式

Question

上下文： 我正在构建用户上载图像的网站，作为列出项目的过程的一部分。我想向他们展示上传表单中的图像预览，因为它既美观又美观，并且可以帮助用户上传和描述他们的商品。

问题： 为了显示图像的预览，我需要把它上传到我的服务器，由于浏览器的沙盒（我不能提交文件输入获得的图像数据到JS除外形成）。但是，我们使用基于用户输入的数据的标识符来存储图像，以保持它们的组织（在我们的例子中，我们将名称清理并将其用作文件名，位于/ useruploads/user_id文件夹中）。

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

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

Answer 1

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

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

Answer 2

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

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

当请求原始图像并在容器中渲染时，还可以在下载时完成图像的大小调整。