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＆＃34; HERE_IS_MY_URL＆＃34; -H＆＃34;主持人：s3.eu-central-1.amazonaws.com＆＃34; -H＆＃34; User-Agent：Mozilla / 5.0（Windows NT 6.1; WOW64; rv：39.0）Gecko / 20100101 Firefox / 39.0＆＃34; -H＆＃34;接受：image / png，image / ; q = 0.8， / *; q = 0.5＆＃34; -H＆＃34;接受语言：en-US，en; q = 0.5＆＃34; - 压缩-H＆＃34; DNT：1＆＃34; -H＆＃34; Referer：http://localhost:9000/edititem/65＆＃34; -H＆＃34;原产地：http://localhost:9000＆＃34; -H＆＃34;连接：keep-alive＆＃34; -H＆＃34; Cache-Control：max-age = 0＆＃34;

响应：200 OK，包含Content-Type 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>

当然，您可能需要允许其他来源/标题/方法，具体取决于您使用S3做的其他事情。

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

1 个答案: