AWS SDK untuk JavaScript V2 telah mencapai akhir dukungan. Kami menyarankan Anda bermigrasi ke AWS SDK untuk JavaScript v3. Untuk detail dan informasi tambahan tentang cara bermigrasi, silakan lihat pengumuman ini.

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Melihat Foto di Bucket Amazon S3 dari Browser

Contoh kode skrip browser ini menunjukkan:

Skenario

Dalam contoh ini, halaman HTML sederhana menyediakan aplikasi berbasis browser untuk melihat foto dalam album foto. Album foto ada di bucket Amazon S3 tempat foto diunggah.

Skrip browser menggunakan SDK JavaScript untuk berinteraksi dengan bucket Amazon S3. Skrip menggunakan listObjects metode kelas klien Amazon S3 untuk memungkinkan Anda melihat album foto.

Tugas Prasyarat

Untuk mengatur dan menjalankan contoh ini, pertama-tama selesaikan tugas-tugas ini.

Mendefinisikan Halaman Web

HTML untuk aplikasi tampilan foto terdiri dari <div> elemen di mana skrip browser membuat antarmuka tampilan. <script>Elemen pertama menambahkan SDK ke skrip browser. <script>Elemen kedua menambahkan JavaScript file eksternal yang memegang kode skrip browser.

Untuk contoh ini, file diberi namaPhotoViewer.js, dan terletak di folder yang sama dengan file HTML. Untuk menemukan SDK_VERSION_NUMBER saat ini, lihat Referensi API untuk JavaScript SDK di Panduan Referensi API. AWS SDK untuk JavaScript

<!DOCTYPE html>
<html>
  <head>
    <!-- **DO THIS**: -->
    <!--   Replace SDK_VERSION_NUMBER with the current SDK version number -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.js"></script>
    <script src="./PhotoViewer.js"></script>
    <script>listAlbums();</script>
  </head>
  <body>
    <h1>Photo Album Viewer</h1>
    <div id="viewer" />
  </body>
</html>

Mengkonfigurasi SDK

Dapatkan kredenSIAL yang Anda butuhkan untuk mengonfigurasi SDK dengan memanggil CognitoIdentityCredentials metode. Anda harus memberikan ID kumpulan identitas Amazon Cognito. Kemudian buat objek AWS.S3 layanan.

// **DO THIS**:
//   Replace BUCKET_NAME with the bucket name.
//
var albumBucketName = "BUCKET_NAME";

// **DO THIS**:
//   Replace this block of code with the sample code located at:
//   Cognito -- Manage Identity Pools -- [identity_pool_name] -- Sample Code -- JavaScript
//
// Initialize the Amazon Cognito credentials provider
AWS.config.region = "REGION"; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: "IDENTITY_POOL_ID",
});

// Create a new service object
var s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  params: { Bucket: albumBucketName },
});

// A utility function to create HTML.
function getHtml(template) {
  return template.join("\n");
}

Sisa kode dalam contoh ini mendefinisikan fungsi berikut untuk mengumpulkan dan menyajikan informasi tentang album dan foto dalam bucket.

Daftar Album di Bucket

Untuk mencantumkan semua album yang ada di bucket, listAlbums fungsi aplikasi memang listObjects gil metode objek AWS.S3 layanan. Fungsi menggunakan CommonPrefixes properti sehingga panggilan hanya mengembalikan objek yang digunakan sebagai album (yaitu folder).

Sisa fungsi mengambil daftar album dari bucket Amazon S3 dan menghasilkan HTML yang diperlukan untuk menampilkan daftar album di halaman web.

// List the photo albums that exist in the bucket.
function listAlbums() {
  s3.listObjects({ Delimiter: "/" }, function (err, data) {
    if (err) {
      return alert("There was an error listing your albums: " + err.message);
    } else {
      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 on an album name to view it.</p>"])
        : "<p>You do not have any albums. Please Create album.";
      var htmlTemplate = [
        "<h2>Albums</h2>",
        message,
        "<ul>",
        getHtml(albums),
        "</ul>",
      ];
      document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    }
  });
}

Melihat Album

Untuk menampilkan isi album di bucket Amazon S3, viewAlbum fungsi aplikasi mengambil nama album dan membuat kunci Amazon S3 untuk album tersebut. Fungsi kemudian memang listObjects gil metode objek AWS.S3 layanan untuk mendapatkan daftar semua objek (foto) dalam album.

Sisa fungsi mengambil daftar objek yang ada di album dan menghasilkan HTML yang diperlukan untuk menampilkan foto di halaman web.

// Show the photos that exist in an album.
function viewAlbum(albumName) {
  var albumPhotosKey = encodeURIComponent(albumName) + "/";
  s3.listObjects({ Prefix: albumPhotosKey }, function (err, data) {
    if (err) {
      return alert("There was an error viewing your album: " + err.message);
    }
    // 'this' references the AWS.Request instance that represents the response
    var href = this.request.httpRequest.endpoint.href;
    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;");
  });
}