0

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

4

2 回答 2

2

I'm afraid I haven't used CollectionFS but, as suggested by user3452997, you could make use of the HTML5 FileReader API to preview the image with something like this:

'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);
        }
    }
}

The user would then see a local version of the image until they refreshed the browser, by which time the remote image would have hopefully uploaded.

Alternatively, I guess you need some sort of callback as to when CollectionFS is done with the upload.

If CollectionFS doesn't provide that, I guess a really hacky solution would be to create a helper that returned the photo after a delay (e.g. within a setTimeout) so that it has time to upload.

于 2015-03-29T13:48:25.180 回答
0

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

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

于 2015-03-29T12:10:11.053 回答