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设置为显示新上传图片的网址。

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

问题：但是，在上传到S3 AWS之前，页面会尝试加载此新图片，但会出错

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

刷新页面后，页面上会加载图像。

我们怎样才能避免在将图片完全上传到S3之前加载图片？

Answer 1

我担心我还没有使用CollectionFS，但是，正如用户3452997所建议的那样，您可以使用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内），以便有时间上传。

Answer 2

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

请参阅＆＃34;在上传文件之前显示上传的文件＆＃34;节

使用CollectionFS上载图像后显示图像

2 个答案: