在 Amazon S3 存储桶中查看照片:完整代码 - AWS SDK for JavaScript

帮助我们改进AWS SDK for JavaScript版本 3 (V3) 文档,方法是使用反馈链接,或者在上创建议题或拉取请求GitHub.

这些区域有:AWS SDK for JavaScriptV3 API 参考指南详细描述了所有的 API 操作AWS SDK for JavaScript版本 3 (V3)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。

在 Amazon S3 存储桶中查看照片:完整代码

本节包含完整 HTML 和JavaScript示例代码,用于可查看 Amazon S3 存储桶中的照片的示例。请参阅先决条件部分详细信息和先决条件。

示例的 HTML:

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="./main.js"></script> </head> <body> <h1>Photo album viewer</h1> <div id="viewer" /> <script> listAlbums(); </script> </body> </html>

可以找到此示例代码在此处GitHub.

下面是示例的浏览器脚本代码。

注意

此示例导入并使用必需的AWS服务 V3 包客户端、V3 命令,并使用send方法采用异步/等待模式。您可以使用 V2 命令创建此示例,而是通过进行一些小的更改。有关详细信息,请参阅 使用 V3 命令

// Load the required clients and packages const { CognitoIdentityClient } = require("@aws-sdk/client-cognito-identity"); const { fromCognitoIdentityPool, } = require("@aws-sdk/credential-provider-cognito-identity"); const { S3Client, ListObjectsCommand } = require("@aws-sdk/client-s3"); // Initialize the Amazon Cognito credentials provider const REGION = "region"; //e.g., 'us-east-1' const s3 = new S3Client({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: REGION }), identityPoolId: "IDENTITY_POOL_ID", // IDENTITY_POOL_ID e.g., eu-west-1:xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx }), }); // A utility function to create HTML. function getHtml(template) { return template.join("\n"); } // Make the getHTML function available to the browser window.getHTML = getHtml; // List the photo albums that exist in the bucket var albumBucketName = "BUCKET_NAME"; //BUCKET_NAME const listAlbums = async () => { try { const data = await s3.send( new ListObjectsCommand({ Delimiter: "/", Bucket: albumBucketName }) ); var albums = data.CommonPrefixes.map(function (commonPrefix) { var prefix = commonPrefix.Prefix; var albumName = decodeURIComponent(prefix.replace("/", "")); return getHtml([ "<li>", '<button style="margin:5px;" onclick="viewAlbum(\'' + albumName + "')\">", albumName, "</button>", "</li>", ]); }); var message = albums.length ? getHtml(["<p>Click an album name to view it.</p>"]) : "<p>You don't have any albums. You need to create an album."; var htmlTemplate = [ "<h2>Albums</h2>", message, "<ul>", getHtml(albums), "</ul>", ]; document.getElementById("viewer").innerHTML = getHtml(htmlTemplate); } catch (err) { return alert("There was an error listing your albums: " + err.message); } }; // Make the viewAlbum function available to the browser window.listAlbums = listAlbums; // Show the photos that exist in an album const viewAlbum = async (albumName) => { try { var albumPhotosKey = encodeURIComponent(albumName) + "/"; const data = await s3.send( new ListObjectsCommand({ Prefix: albumPhotosKey, Bucket: albumBucketName, }) ); var href = "https://s3." + REGION + ".amazonaws.com/"; var bucketUrl = href + albumBucketName + "/"; var photos = data.Contents.map(function (photo) { var photoKey = photo.Key; var photoUrl = bucketUrl + encodeURIComponent(photoKey); return getHtml([ "<span>", "<div>", "<br/>", '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>', "</div>", "<div>", "<span>", photoKey.replace(albumPhotosKey, ""), "</span>", "</div>", "</span>", ]); }); var message = photos.length ? "<p>The following photos are present.</p>" : "<p>There are no photos in this album.</p>"; var htmlTemplate = [ "<div>", '<button onclick="listAlbums()">', "Back To albums", "</button>", "</div>", "<h2>", "Album: " + albumName, "</h2>", message, "<div>", getHtml(photos), "</div>", "<h2>", "End of album: " + albumName, "</h2>", "<div>", '<button onclick="listAlbums()">', "Back To albums", "</button>", "</div>", ]; document.getElementById("viewer").innerHTML = getHtml(htmlTemplate); document .getElementsByTagName("img")[0] .setAttribute("style", "display:none;"); } catch (err) { return alert("There was an error viewing your album: " + err.message); } }; // Make the viewAlbum function available to the browser window.viewAlbum = viewAlbum;

可以找到此示例代码在此处GitHub.