来自Amazon S3 Bucket的图像未在第一次请求中显示

时间:2017-10-10 03:18:42

标签: javascript angularjs amazon-web-services amazon-s3

我面临一个独特的问题,我无法理解这背后的原因。

我有Amazon S3帐户,我创建了一个存储上传图像的存储桶。我正在使用以下代码来检索图像。我的问题是独一无二的,因为当我在第一次请求中检索图像时,它没有在网页上显示任何内容,但是在后续请求后显示图像并显示到网页。

我无法理解原因。

Angular JS代码

$scope.retrieveImage = function ()
{
    AWS.config.update({
        accessKeyId: "MY_ACCESS_KEY",
        secretAccessKey: "MY_SECRET_KEY"
    });

    AWS.config.region = "BUCKET_REGION";

    var bucketInstance = new AWS.S3();
    var params = {
        Bucket: "BUCKET_NAME",
        Key: "FILE_NAME"
    }
    bucketInstance.getObject(params, function (err, file) {
        if (file) {
            $scope.imgSrc = "data:" + file.ContentType + ";base64," + encode(file.Body);           
        } else {
            console.log('error::', err);
        }
    });
}

function encode(data) {
    var str = data.reduce(function (a, b) { return a + String.fromCharCode(b) }, '');
    return btoa(str).replace(/.{76}(?=.)/g, '$&\n');
}

2 个答案:

答案 0 :(得分:2)

问题可能在于AngularJs,确认图像是在AngularJs之外检索的,或者您可以使用Chrome Developer工具监控网络流量,您可能会发现每次请求都会从Amazon S3返回图像并且您的AngularJs视图只是没有正确刷新

答案 1 :(得分:1)

您应该阅读有关S3 Data Consystency Model

的更多信息
  

Amazon S3为新的PUTS提供了读写后一致性   所有区域中的S3存储桶中的对象都有一个警告。警告   如果您对密钥名称发出HEAD或GET请求(以查找是否为   在创建对象之前,对象存在,Amazon S3提供   写后读的最终一致性。

     

Amazon S3为覆盖PUTS和DELETES提供最终一致性   在所有地区。

这意味着在您获得成功代码后会有一些延迟/延迟。