Fine Uploader 无法从亚马逊 S3 绘制缩略图

Posted 2023-03-04

【中文标题】Fine Uploader 无法从亚马逊 S3 绘制缩略图

【英文标题】：Fine Uploader cannot draw thumbnail from amazon S3

【发布时间】：2015-09-24 02:28:35

【问题描述】：

我有一个带有 Fine Uploader 的表单，我正在加载一个初始文件列表（如 here 所述）

对于初始文件列表，我还将返回指向我在 Amazon S3 中的文件的 thumbnailUrl。

现在我看到 Fine Uploader 实际上正在向 S3 发出 HTTP 请求并获得 200 OK 但未显示缩略图，这是我在控制台中看到的：

[Fine Uploader 5.1.3] Attempting to update thumbnail based on server response.
[Fine Uploader 5.1.3] Problem drawing thumbnail!

来自我的服务器的响应：

"name": 123, "uuid": "...", "thumbnailUrl": "...."

现在 Fine Uploader 向 S3 发送到 thumbnailUrl 属性中指定的 URL 的 GET 请求。请求是这样的：

curl "HERE_IS_MY_URL" -H​​ "主机：s3.eu-central-1.amazonaws.com" -H "用户代理：Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/ 39.0" -H "接受：image/png,image/;q=0.8,/*;q=0.5" -H "接受-语言：en-US,en;q=0.5" - -compressed -H "DNT: 1" -H "Referer: http://localhost:9000/edititem/65" -H "Origin: http://localhost:9000" -H "Connection: keep-alive" -H "Cache-Control: max-age=0"

响应：200 OK with Content-Type application/octet-stream

是否有我缺少的 Fine Uploader 配置选项？难道这是一个与 CORS 相关的问题？

【问题讨论】：

请根据浏览器开发工具和您返回的初始文件列表数据添加更多信息，例如特定GET请求（针对图像）的详细信息。

@RayNicholus 我用更多信息更新了这个问题

内容类型是application/octet-stream？这听起来根本不像一个图像。听起来您的服务器没有提供实际图像。

内容类型 application/octet-stream 来自亚马逊 S3 的响应，而不是来自我的服务器

那么来自 S3 的响应似乎不是图像。如果没有来自您的 S3 存储桶的示例 URL，我不确定如何提供进一步的帮助。否则，您可以查看 Fine Uploader 的调试日志和/或单步执行代码以查看失败的原因。

【参考方案1】：

Fine Uploader 在现代浏览器中使用 ajax 请求 (XMLHttpRequest) 在初始文件列表端点返回的 URL 处加载缩略图。这样做是为了缩放和正确定位图像预览。

您需要在 S3 存储桶上设置一个 CORS 规则，以允许通过 GET 请求进行 JS 访问。它看起来像这样：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

当然，您可能需要允许其他来源/标头/方法，具体取决于您对 S3 执行的其他操作。

【讨论】：

这确实是问题的解决方案 - 另请参阅原始帖子的 cmets 中的讨论。非常感谢！