初始文件列表未显示实际文件答案

【问题标题】：Initial file list not showing actual files初始文件列表未显示实际文件
【发布时间】：2016-04-01 08:06:44
【问题描述】：

我已经实现initFiles 来显示已经上传的 s3 文件，但实际的图像缩略图没有显示。此外，我无法单击显示的默认缩略图（请参阅image）。我怎样才能看到实际的图像和链接作品？

我下面有 JS sn-p

session: {
        endpoint: "http://localhost/app/ci/php-s3-server/endpoint-cors.php?filelist"
    },

endpoint-cors.php?filelist 调用的响应是...

[{"name":"art_collage.png","uuid":"e3554aa0-c025-4653-bb71-4afe9d979f06","s3Key":"test\/e3554aa0-c025-4653-bb71-4afe9d979f06.png","s3Bucket":"kidkivetest"},{"name":"process_step_2.png","uuid":"e5d84dd7-458c-4601-9168-e16e747134d0","s3Key":"test\/e5d84dd7-458c-4601-9168-e16e747134d0.png","s3Bucket":"xx_my_bucket_xx"}]

S3 存储桶结构有 2 张图片：

All Buckets /xx_my_bucket_xx/test
e3554aa0-c025-4653-bb71-4afe9d979f06.png
e5d84dd7-458c-4601-9168-e16e747134d0.png

【问题讨论】：

标签： amazon-s3 fine-uploader aws-php-sdk

【解决方案1】：

如果您想在initial files list 中显示缩略图，您必须为列表中的每个文件提供一个thumbnailUrl。例如：

[{"name":"art_collage.png","uuid":"e3554aa0-c025-4653-bb71-4afe9d979f06","s3Key":"test\/e3554aa0-c025-4653-bb71-4afe9d979f06.png","s3Bucket":"kidkivetest", "thumbnailUrl": "http://mys3bucket.com/art_collage.png"}...]

【讨论】：

我添加了 thumbnailUrl，现在它显示的默认图像 imgur.com/qki15Gu 与以前相比有所不同。但是，没有显示实际图像。请参阅下面的回复。
[{"name":"art_collage.png","uuid":"e3554aa0-c025-4653-bb71-4afe9d979f06","s3Key":"test\/e3554aa0-c025-4653- bb71-4afe9d979f06.png","s3Bucket":"xx_my_bucket_xx","thumbnailUrl":"https:\/\/s3.amazonaws.com\/xx_my_bucket_xx\/test\/e3554aa0-c025-4653-bb71-4afe9d979f06.png ?AWSAccessKeyId=AKIAJNRQDV3ZDPIU2ZEQ&Expires=1459473457&Signature=5bX5LFZrpC%2FjE%2FC5Bxh8i5x3Sp0%3D"},....}]
很可能是因为图像来自与托管页面的域不同的域。这是一个 CORS 问题，在任何版本的 IE（用于图像）中都无法解决。 S3 需要为 GET 请求返回一个 Access-Control-Allow-Origin 标头，以便它在其他浏览器中工作。跨浏览器解决方案是通过您控制的服务器代理缩略图图像，该服务器与托管页面的域位于同一域中。
将 GET 添加到 CORSRule 后，它起作用了。谢谢雷！
请注意，我相当肯定这在任何版本的 Internet Explorer 中都不起作用。跨域图片有点特别。