Fine Uploader 无法从 Amazon S3 绘制缩略图

Question

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

对于初始文件列表，我还返回 thumbnailUrl，它指向我在亚马逊 S3 中的文件。

现在我看到 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 发送 GET 请求到 thumbnailUrl 属性中指定的 URL。请求是这样的：

curl "HERE_IS_MY_URL" -H "Host: s3.eu-central-1.amazonaws.com" -H "User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0" -H "Accept: image/png,image/;q=0.8,/*;q=0.5" -H "Accept-Language: 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，内容类型 application/octet-stream

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

Answer 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>

当然，您可能需要允许其他 origins/headers/methods，具体取决于您使用 S3 进行的其他操作。

Fine Uploader 无法从 Amazon S3 绘制缩略图

Fine Uploader cannot draw thumbnail from amazon S3

amazon-s3

cors

fine-uploader