上下文： 我正在构建一个用户上传图像的站点，作为列出项目的过程的一部分。我想在上传表单中向他们展示图片的预览，因为它既美观又有助于用户上传和描述他们的商品。
问题： 为了显示图像的预览，由于浏览器的沙盒，我需要将其上传到我的服务器（除非提交文件输入表单，否则我无法将图像数据导入JS）。但是，我们使用基于用户输入的数据的标识符来存储图像，以便使它们保持井井有条（在我们的例子中，我们清理名称并将其用作文件名，在/ useruploads / user_id文件夹中）。
虽然我可以更改文件的命名方案以消除用户输入的依赖性（即sha1文件），但上传到s3并调整图像大小是一项昂贵的操作，我不想占用资源不必要的。如果我上传图像而不调整大小并生成缩略图，则在提交包含有关项目信息的表单后，应用程序将必须从S3流式传输数据，调整大小并生成缩略图，然后重新上载图像，这似乎有点迂回。
我觉得这是一个非常常见的问题，我想知道在这方面是否有人有关于如何处理图像上传的任何模式或建议。
答案 0 :(得分：1)
使用FileReader API，您实际上可以从磁盘读取二进制blob，然后在提交表单之前将该图像纯粹用于客户端！
请参阅http://www.onlywebpro.com/2012/01/24/create-thumbnail-preview-of-images-using-html5-api/
答案 1 :(得分：0)
大多数服务都有专门的位置来在您上传时自动存储缩略图。在我的服务中，我也将原始图像存储在s3上，并将相应的虚拟路径映射到其缩略图，我将其存储在缩略图图像的用户元数据中。
因此，从UI的角度来看，我们最初只显示缩略图，相对下载成本较低。一旦用户点击图像，就从该图像的元数据接收原始图像位置。有了这个，我们只有在用户请求时才能获得原始图像。
当请求原始图像并在容器内呈现时，也可以在下载时完成图像的大小调整。