从S3获取数据在html表示,javascript – 显示从s3获取的图像

您不会“获取”要显示的图像.您只需将图像URL指向它们存储的位置(在您的情况下为S3).所以,而不是拉单个对象,拉取该桶中的文件列表(bucket.listObjects),然后将它们添加到缩略图/图像的源.

$scope.s3Url = 'https://s3-.amazonaws.com/myBucket/';

var bucket = new AWS.S3({params: {Bucket: 'myBucket'}});

bucket.listObjects(function (err, data) {

if (err) {

console.log(err);

} else {

console.log(data);

$scope.allImageData = data.Contents;

}

});

假设这里文件具有读取权限.由于明显的原因,他们将无法访问公共阅读权限.

编辑：根据评论,问题是在页面上加载实际的图像.以下是如何做到这一点：

function myCtrl($scope, $timeout) {

AWS.config.update({

accessKeyId: 'YOUR_ACCESS_TOKEN', secretAccessKey: 'YOUR_SECRET'});

AWS.config.region = "YOUR_REGION";

var bucket = new AWS.S3({params: {Bucket: 'YOUR_BUCKET'}});

bucket.getObject({Key: 'happy-face.jpg'},function(err,file){

$timeout(function(){

$scope.s3url = "data:image/jpeg;base64," + encode(file.Body);

},1);

});

}

function encode(data)

{

var str = data.reduce(function(a,b){ return a+String.fromCharCode(b) },'');

return btoa(str).replace(/.{76}(?=.)/g,'$&\n');

}

从S3获得的数据是字节数组.您需要将其转换为base64编码的数据URI.编码功能从here借来.这是一个jsFiddle,删除了凭据.