上传到 Amazon S3 的 Fine Uploader 图像预览？

Question

由于 Fine Uploader 4.0 能够完全在客户端创建图像预览（IE 9.0 和更低版本除外），是否可以使用相同的技术来创建与原始文件一起上传的缩略图，特别是亚马逊 S3。如您所知，Amazon S3 不提供服务器端处理，因此很难创建直接上传到 Amazon S3 的媒体缩略图，无需提前创建缩略图，或使用单独的服务器仅处理图像以创建缩略图.

如果可以创建正在上传的图片的缩略图，并且只在客户端这样做，那么如何将缩略图包含在上传的文件列表中？

按照这些思路，我们还希望创建一个简单的 HTML 页面，其中包含页面中包含的上传文件，然后将其与其余文件同时上传。该 HTML 页面将作为交付页面提供给用户，然后可以将其传递给最终目的地收件人。我们当然可以让服务器端部分在数据库中记录要上传的文件，并允许服务器呈现交付页面。但我首先想尝试仅在客户端创建自定义 HTML 交付页面，然后改用它。原因是首先，我们希望避免对我们的普通服务器造成过度压力，其次，如果用户上传的文件导致内容被标记，我不希望我们的域名被列入黑名单因为看起来我们正在提供恶意内容（但我们完全打算监控使用此服务上传的任何文件）。相反，如果所有文件都通过 S3 传递，尽管它们都来自我们控制的存储桶，我假设在 S3 将特定存储桶列入黑名单的可能性要小得多。如果您对这个想法/关注/理论有什么要补充的，我很想听听。

谢谢。

Answer 1

如果可以创建正在上传的图片的缩略图，并且只在客户端这样做，那么如何将缩略图包含在上传的文件列表中？

注意，这种技术只适用于现代浏览器：

您可以将呈现预览的<img> 标记的src 属性中存在的data-uri 转换为Blob，然后使用FU's API method addBlobs() 将其添加到文件列表中上传。

SO#4997908 似乎有可以将数据 uri 转换为 blob 的代码。 （我已经测试了 Maurizo 对该答案的解决方案，它似乎可以正常工作，尽管我只对其进行了最低限度的测试）

使用此技术的一个警告是，如果您使用的是 FU UI 模式，那么当在其上调用 addBlobs 时，新添加的缩略图将呈现到文件列表中，将为此生成另一个预览，并且......这可能会继续无限期。

这是因为 -- 如果我们查看 UI 模式的 onSubmit handler -- 它每次都将文件添加到文件列表中。

_onSubmit: function(id, name) {
    this._parent.prototype._onSubmit.apply(this, arguments);
    this._addToList(id, name);
}

要在 UI 模式下绕过此警告，您可以在核心模式下创建 Fine Uploader 的另一个实例，在该实例上调用 addBlobs，并最终在该实例上调用 uploadStoredFiles。这将使您能够上传您的图像，它是预览，并且文件列表中没有额外的文件。