javascript - 使用 CollectionFS 上传图像后显示图像

Question

使用 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 之前加载图像？

Answer 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 没有提供这一点，我想一个真正的 hacky 解决方案是创建一个助手，在延迟后(例如在 setTimeout 内)返回照片，以便有时间上传。