问题描述
我有一个精细上传的一种形式,我加载初始的文件列表(按实施的)
I have a form with a Fine Uploader and I am loading an initial file list (as described here)
有关的初步文件,我也回到了 thumbnailUrl
指向我的文件Amazon的S3。
For the list of initial files I am also returning the thumbnailUrl
which points to my files in Amazon's S3.
现在我看到精细上传实际上是使一个HTTP请求到S3,并得到一个200 OK,但缩略图不显示,这是我在控制台中看到:
Now I see that Fine Uploader is actually making an HTTP request to S3 and gets a 200 OK but the thumbnail is not displayed and this is what I see in the console:
[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": "...."}
现在精细上传发出GET请求,S3在thumbnailUrl属性指定的URL。请求是这样的:
Now Fine Uploader makes a GET request to S3 to the URL specified in the thumbnailUrl property. The request goes like this:
卷曲HERE_IS_MY_URL-H主持人: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接受:图像/ PNG,图像/ ; Q = 0.8,的/ *; Q = 0.5-H接受语言:EN-US,EN; Q = 0.5 - -com pressed -HDNT:1-H的Referer:的http://本地主机:9000 / edititem / 65 -H原产地:的http://本地主机:9000 -H连接:备存─活着-H缓存控制:最大年龄= 0
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确定与内容类型的应用程序/八位字节流
Response: 200 OK with Content-Type application/octet-stream
有没有办法,我缺少任何配置选项精细上传?难道说,这是一个CORS相关的问题?
Is there any configuration option for Fine Uploader that I am missing? Could it be that this is a CORS-related issue?
推荐答案
精细上传负荷的缩略图通过使用Ajax请求(您最初的文件列表端点返回的URL XMLHtt prequest
)在现代浏览器。为此,它会因此它可以扩展并正确定位图像preVIEW。
Fine Uploader loads thumbnails at the URL returned by your initial file list endpoint using an ajax request (XMLHttpRequest
) in modern browsers. It does this so it can scale and properly orient the image preview.
您需要在您的S3存储桶一个CORS规则,允许通过一个GET请求JS访问。它看起来是这样的:
You'll need a CORS rule on your S3 bucket that allows JS access via a GET request. It will look something like this:
<?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。
Of course, you may need to allow other origins/headers/methods depending on whatever else you are doing with S3.
这篇关于精细上传无法从亚马逊S3借鉴缩略图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!