使用 CollectionFS 上传图像后显示图像答案

【问题标题】：Show Image after Image has been uploaded using CollectionFS使用 CollectionFS 上传图像后显示图像
【发布时间】：2015-06-02 10:39:33
【问题描述】：

使用 Meteor.js 和 CollectionFS 将图像上传到 AWS S3。通过文件输入字段选择要上传的图像。

'change .upload-input': function() {
    Images.insert(imageFile, function(err, fileObj) {
        Albums.update({_id: albumId}, {$set: { 
            'photo': BASE_URL + fileObj._id + 'photo.jpg'
        }})
    })
}

在同一页面上，我们有一个 img 和 src 设置来显示新上传图片的 URL。

{{#with album}}
    <img src="{{ photo }}">
{{/with}}

问题：但是页面在上传到 S3 AWS 完成之前尝试加载这个新图像，给出错误

GET https://s3.amazonaws.com/myBucket/images/2nkLHcHsqxYrqW3hM-photo.jpg 403 (Forbidden)

刷新页面后图片加载到页面上。

我们如何避免在图像完全上传到 S3 之前加载图像？

【问题讨论】：

标签： javascript jquery meteor amazon-s3 collectionfs

【解决方案1】：

恐怕我没有使用过 CollectionFS，但根据 user3452997 的建议，您可以使用 HTML5 FileReader API 来预览图像，如下所示：

'change .upload-input': function(e) {
    var file = e.target.files[0];
    // Rudimentary check that we're dealing with an image
    if (file && file.type.substring(0,6) === 'image/') {
        var reader = new FileReader();
        reader.onload = function() {
            $('#imgId').attr('src', reader.result);
        }
    }
}

然后用户将看到图像的本地版本，直到他们刷新浏览器，此时远程图像有望上传。

或者，我想您需要某种回调来了解 CollectionFS 何时完成上传。

如果 CollectionFS 不提供，我想一个非常老套的解决方案是创建一个帮助程序，在延迟后（例如在 setTimeout 内）返回照片，以便它有时间上传。

【讨论】：

没有这个 ->reader.readAsDataURL(file);上面的代码不起作用。

【解决方案2】：

如果是 AWS-S3 你可以试试https://atmospherejs.com/edgee/slingshot

请参阅“在上传前显示上传的文件”部分

【讨论】：

感谢您的建议，我实际上正在从弹弓转向collectionfs。 collectionfs中是否有类似slingshot的uploader.url(true)的东西？
hmmm，不知道，但我认为你应该阅读关于 html5 FileReader api:html5rocks.com/en/tutorials/file/dndfiles 你可能需要阅读前面的文件并显示它，然后将它发送到 S3，然后然后以某种方式替换它