3

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

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

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

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

4

2 回答 2

1

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

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

于 2012-11-10T20:24:24.673 回答
0

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

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

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

于 2012-07-10T07:41:41.797 回答