Amazon s3 在Meteor CollectionFS和S3图像下载时显示加载程序？

当AmazonS3图像从AmazonS3下载（或者从任何地方下载）时，是否有显示加载程序的函数/钩子？我目前没有使用任何CDN或CloudFront，因此我的下载有时会很慢。我想在图像下载时显示一个加载器。在我的代码中，我有：

{{#if uploadedCustomLogo}}
   {{#with customLogo}}
      {{#if isUploaded}}
         <div class="img-wrapper">
            <img src="{{this.url store='logos'}}" alt=""/>
         </div>
      {{else}}
         {{> loading}}
      {{/if}}
   {{/with}} 
{{/if}}     

{{{#如果上载了CustomLogo}
{{#带有自定义徽标}
{{{#如果已上载}
{{else}
{{>加载}
{{/if}
{{/与}}
{{/if}

问题是上传

{{>loading}}

loader模板运行良好，但它只持续了几分之一秒，因为实际上传速度非常快。下载可能需要几秒钟的时间（有时甚至在一张小图片上也需要20秒左右）。有没有办法测试/检查图像是否已下载

我使用FF Inspector查看在

img

标记上设置

src

是否有延迟，但它会立即设置。所以等待真的是在S3上。。。DOM最终加载后不会发生任何更改

---

我正在使用CollectionFS和S3适配器（Meteor-cfs-S3）。

我找到了答案。我在谷歌上搜索错误的东西。问题是如何使用JQuery在图像加载时侦听。因此，您可以将加载程序添加到模板中，然后在图像上触发

load

事件后将其隐藏。这个简单的代码在Meteor中非常有效：

Template.myTemplate.events({

   'load #whateverImage': function(event) {
      event.preventDefault();

      //  Hide your loader DIV (for example)
      hideLoader();
},

---

解决方案是使用has-stored-helper，我也有一个问题，这一个被上传到meteor服务器，但是如果你想等待它被上传到amazon s3

{{{如果这是。hasStored'thumbs}}

编辑： 这里是我的自定义帮助程序，用于检查它是否上传并存储到AmazonS3（这样我就可以安全地创建一个AmazonS3URL并将其显示给用户）

在我的例子中是这样的：

uploadDoc: function () {
  var fileId = Template.instance().posterData.get('fileId'); // You can ignore this, It's just how I get the file document id.
  if (fileId)
    return Images.findOne(fileId); // We need the file document
}

isUploadedAndStored: function (storage) {
  if (this && this.copies && this.copies[storage])
    return true;
}

sUrl: function () {
  if (this && this.copies && this.copies.thumbs)
    return 'https://s3-us-west-2.amazonaws.com/NAME/' + this.copies.thumbs.key;
}

像这样使用它：

{{#with uploadDoc}}
  {{#if isUploadedAndStored 'thumbs'}}
    <img class="attachment-thumbnail" src="{{sUrl}}">
  {{else}}
    {{>loading}}
  {{/if}}
{{/with}}

{{{#带uploadDoc}
{{#如果已上载并存储“拇指”}
{{else}
{{>加载}
{{/if}
{{/与}}

---

它是如何工作的？当我们订阅上传的文件集合时，文档将不会有

副本

，当它来自服务器时，意味着它实际上保存在amazon s3上，

this.hasStored

进行了类似的检查，但我发现它重新运行了太多次，可能需要向github报告，以便他们能够修复它。

我仍然存在的唯一问题是在Firefox中，任何缓存的图像都会在浏览器中正确显示，然后在从S3重新加载后触发加载事件（这看起来很奇怪，不知道为什么缓存的图像会重新加载本身。）因此，这就产生了一个问题，因为如果我在加载事件触发之前显示加载程序，则在缓存的图像上，图像将与加载程序一起显示。因此，现在我只是在图像缓存之前的第一次上载/显示图像时显示加载程序。您是否有幸使用cfs:s3启用AWS CloudFront？我无法使其工作。我正在更新我的IAM用户使用CloudFront策略，我在我的

FS.Store.S3

对象中将

endpoint

设置为我的CloudFront端点（这是他们可以接受的参数）。但是图像从不下载。CloudFront应该只通过图像-只要权限设置正确。关于CloudFront，如果您将

ACL

设置为

public read

，那么您可以使用CloudFront URL和

copies.co为
标记构建URLllectionName.key

属性从您的图像集合中删除。仍在处理签名请求。作为对您答案的响应…我无法使

{{{{如果this.hasStored'store}}

返回true。我的

{{with customLogo}

而且它永远不会返回真值。我可以得到

这个。isupload

来返回一些东西，但它总是返回得非常快。等待的最长时间似乎仍然是图像下载。除非它正在存储，而且由于某种原因，我无法得到

这个。hasStored

来做任何事情。@evolross我没有使用cloudfront，只有s3。这就是奇怪的是，这个.hasStored对你不起作用，你可能有错误的配置，比如'store'，它是正确的名称吗？我实际上开始使用我自己的助手，因为它似乎

这个.hasStored

打了多次电话。我会用它更新我的答案。结果发现我有点做错了…我修复了它，现在

已上载
and
hasStored
正在工作！我仍然有一些问题，现在我可以使用
uploadProgress
看到数字从0变为100（尤其是在大文件上），但它仍然变为100%，并挂起数秒。这需要时间来“存储”然后“下载”。我们需要一个
storeProgress
。与删除文件一样，在
图像之后运行回调有时需要几秒钟。remove（id）
。我希望也有一个
removeprogress
。你看到了吗？大多数图像上传速度很快，需要一段时间才能存储。