Die AWS SDK für JavaScript Version 2 ist erreicht end-of-support. Wir empfehlen Ihnen, auf [AWS SDK für JavaScript Version 3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/) zu migrieren. Weitere Einzelheiten und Informationen zur Migration finden Sie in dieser [Ankündigung](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/).

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

# Fotos aus einem Browser auf Amazon S3 hochladen
<a name="s3-example-photo-album"></a>

![\[JavaScript code example that applies to browser execution\]](http://docs.aws.amazon.com/de_de/sdk-for-javascript/v2/developer-guide/images/browsericon.png)

**Dieses Beispiel eines Browser-Skriptcodes veranschaulicht:**
+ So erstellen Sie eine Browseranwendung, mit der Benutzer Fotoalben in einem Amazon S3 S3-Bucket erstellen und Fotos in die Alben hochladen können.

## Das Szenario
<a name="s3-example-photo-album-scenario"></a>

In diesem Beispiel bietet eine einfache HTML-Seite eine browserbasierte Anwendung zum Erstellen von Fotoalben in einem Amazon S3 S3-Bucket, in den Sie Fotos hochladen können. In der Anwendung können Sie Fotos und Alben löschen, die von Ihnen hinzugefügt wurden.

![\[JavaScript in einem Browserskript, das Amazon S3 S3-Buckets für Fotoalben verwendet.\]](http://docs.aws.amazon.com/de_de/sdk-for-javascript/v2/developer-guide/images/s3-photo-album-example.png)


Das Browser-Skript verwendet das SDK für JavaScript die Interaktion mit einem Amazon S3 S3-Bucket. Verwenden Sie die folgenden Methoden der Amazon S3 S3-Clientklasse, um die Fotoalbum-Anwendung zu aktivieren: 
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property)
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#headObject-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#headObject-property)
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putObject-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putObject-property)
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#upload-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#upload-property)
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#deleteObject-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#deleteObject-property)
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#deleteObjects-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#deleteObjects-property)

## Erforderliche Aufgaben
<a name="s3-example-photo-album-scenario-prerequisites"></a>

Zum Einrichten und Ausführen dieses Beispiels müssen Sie zunächst diese Aufgaben abschließen:
+ Erstellen Sie in der [Amazon S3 S3-Konsole](https://console.aws.amazon.com/s3/) einen Amazon S3 S3-Bucket, in dem Sie die Fotos im Album speichern werden. Weitere Informationen zum Erstellen eines Buckets in der Konsole finden Sie unter [Erstellen eines Buckets](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket.html) im *Amazon Simple Storage Service-Benutzerhandbuch*. Stellen Sie sicher, dass Sie über Berechtigungen zum **Lesen** und **Schreiben** für **Objekte** verfügen. Weitere Informationen zum Einrichten von Bucket-Berechtigungen finden Sie unter [Berechtigungen für den Zugriff auf Websites festlegen](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html).
+ Erstellen Sie in der [Amazon Cognito Cognito-Konsole](https://console.aws.amazon.com/cognito/) einen Amazon Cognito Cognito-Identitätspool mithilfe von Federated Identities, wobei der Zugriff für nicht authentifizierte Benutzer in derselben Region wie der Amazon S3 S3-Bucket aktiviert ist. Sie müssen die Identitäten-Pool-ID im Code einschließen, um Anmeldeinformationen für das Browser-Skript zu erhalten. *Weitere Informationen zu Amazon Cognito Federated Identities finden Sie unter [Amazon Cognito Identity Pools (Federated Identites)](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-identity.html) im Amazon Cognito Developer Guide.*
+ Suchen Sie in der [IAM-Konsole](https://console.aws.amazon.com/iam/) nach der IAM-Rolle, die von Amazon Cognito für nicht authentifizierte Benutzer erstellt wurde. Fügen Sie die folgende Richtlinie hinzu, um Lese- und Schreibberechtigungen für einen Amazon S3 S3-Bucket zu gewähren. Weitere Informationen zum Erstellen einer IAM-Rolle finden Sie unter [Creating a Role to Delegate Permissions to an AWS Service](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) im *IAM-Benutzerhandbuch*.

  Verwenden Sie diese Rollenrichtlinie für die IAM-Rolle, die von Amazon Cognito für nicht authentifizierte Benutzer erstellt wurde.
**Warnung**  
Wenn Sie Zugriff für nicht authentifizierte Benutzer aktivieren, gewähren Sie allen Benutzer auf der ganzen Welt Schreibzugriff auf den Bucket und alle Objekte im Bucket. Dieses Sicherheitsniveau dient in diesem Beispiel dazu, den Schwerpunkt auf den primären Zielen des Beispiels zu belassen. In vielen Realsituationen wird dringend eine höhere Sicherheit, z. B. die Verwendung authentifizierter Benutzern und Objektbesitz, empfohlen.

------
#### [ JSON ]

****  

  ```
  {
     "Version":"2012-10-17",		 	 	 
     "Statement": [
        {
           "Effect": "Allow",
           "Action": [
              "s3:DeleteObject",
              "s3:GetObject",
              "s3:ListBucket",
              "s3:PutObject",
              "s3:PutObjectAcl"
           ],
           "Resource": [            
              "arn:aws:s3:::BUCKET_NAME",
              "arn:aws:s3:::BUCKET_NAME/*"
           ]
        }
     ]
  }
  ```

------

## Konfigurieren von CORS
<a name="s3-example-photo-album-cors-configuration"></a>

Bevor das Browserskript auf den Amazon S3 S3-Bucket zugreifen kann, müssen Sie zunächst die [CORS-Konfiguration](cors.md#configuring-cors-s3-bucket) wie folgt einrichten.

**Wichtig**  
In der neuen S3-Konsole muss die CORS-Konfiguration JSON sein.

------
#### [ JSON ]

```
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]
```

------
#### [ XML ]

```
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>ETag</ExposeHeader>
    </CORSRule>
</CORSConfiguration>
```

------

## Die Webseite
<a name="s3-example-photo-album-html"></a>

Der HTML-Code für die Anwendung zum Hochladen von Fotos besteht aus einem <div>-Element, in dem das Browser-Skript die Upload-Benutzeroberfläche erstellt. Das erste <script>-Element fügt das SDK dem Browser-Skript hinzu. Das zweite <script>Element fügt die externe JavaScript Datei hinzu, die den Browser-Skriptcode enthält.

```
<!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="./s3_photoExample.js"></script>
    <script>
       function getHtml(template) {
          return template.join('\n');
       }
       listAlbums();
    </script>
  </head>
  <body>
    <h1>My Photo Albums App</h1>
    <div id="app"></div>
  </body>
</html>
```

## Konfigurieren des SDKs
<a name="s3-example-photo-album-configure-sdk"></a>

Rufen Sie die für die Konfiguration des SDK erforderlichen Anmeldeinformationen ab, indem Sie die `CognitoIdentityCredentials` Methode aufrufen und die Amazon Cognito Cognito-Identitätspool-ID angeben. Erstellen Sie als nächstes ein `AWS.S3`-Client-Serviceobjekt.

```
var albumBucketName = "BUCKET_NAME";
var bucketRegion = "REGION";
var IdentityPoolId = "IDENTITY_POOL_ID";

AWS.config.update({
  region: bucketRegion,
  credentials: new AWS.CognitoIdentityCredentials({
    IdentityPoolId: IdentityPoolId,
  }),
});

var s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  params: { Bucket: albumBucketName },
});
```

Fast der gesamte restliche Code in diesem Beispiel ist in einer Reihe von Funktionen organisiert, die Informationen über die Alben im Bucket sammeln und darstellen, in das Album hochgeladene Fotos laden und anzeigen sowie Fotos und Alben löschen. Diese Funktionen sind:
+ `listAlbums`
+ `createAlbum`
+ `viewAlbum`
+ `addPhoto`
+ `deleteAlbum`
+ `deletePhoto`

## Auflisten von Alben im Bucket
<a name="s3-example-photo-album-list-albums"></a>

Die Anwendung erstellt Alben im Amazon S3 S3-Bucket als Objekte, deren Schlüssel mit einem Schrägstrich beginnen, was darauf hinweist, dass das Objekt als Ordner fungiert. Um alle vorhandenen Alben im Bucket aufzulisten, ruft die `listAlbums`-Funktion der Anwendung die `listObjects`-Methode des `AWS.S3`-Serviceobjekts auf und verwendet gleichzeitig `commonPrefix`, damit der Aufruf nur Objekte wiedergibt, die als Alben verwendet werden.

Der Rest der Funktion nimmt die Liste der Alben aus dem Amazon S3 S3-Bucket und generiert den HTML-Code, der für die Anzeige der Albumliste auf der Webseite benötigt wird. Darüber hinaus ermöglicht die Funktion das Löschen und Öffnen einzelner Alben.

```
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>",
          "<span onclick=\"deleteAlbum('" + albumName + "')\">X</span>",
          "<span onclick=\"viewAlbum('" + albumName + "')\">",
          albumName,
          "</span>",
          "</li>",
        ]);
      });
      var message = albums.length
        ? getHtml([
            "<p>Click on an album name to view it.</p>",
            "<p>Click on the X to delete the album.</p>",
          ])
        : "<p>You do not have any albums. Please Create album.";
      var htmlTemplate = [
        "<h2>Albums</h2>",
        message,
        "<ul>",
        getHtml(albums),
        "</ul>",
        "<button onclick=\"createAlbum(prompt('Enter Album Name:'))\">",
        "Create New Album",
        "</button>",
      ];
      document.getElementById("app").innerHTML = getHtml(htmlTemplate);
    }
  });
}
```

## Erstellen eines Albums im Bucket
<a name="s3-example-photo-album-create-album"></a>

Um ein Album im Amazon S3 S3-Bucket zu erstellen, überprüft die `createAlbum` Funktion der Anwendung zunächst den für das neue Album angegebenen Namen, um sicherzustellen, dass er geeignete Zeichen enthält. Die Funktion bildet dann einen Amazon S3 S3-Objektschlüssel und übergibt ihn an die `headObject` Methode des Amazon S3 S3-Serviceobjekts. Diese Methode gibt die Metadaten des angegebenen Schlüssels zurück, d. h., wenn Daten zurückgegeben werden, ist bereits ein Objekt mit diesem Schlüssel vorhanden.

Wenn das Album nicht bereits vorhanden ist, ruft die Funktion die `putObject`-Methode des `AWS.S3`-Serviceobjekts auf, um das Album zu erstellen. Anschließend ruft sie die `viewAlbum`-Funktion ab, um das neue leere Album anzuzeigen.

```
function createAlbum(albumName) {
  albumName = albumName.trim();
  if (!albumName) {
    return alert("Album names must contain at least one non-space character.");
  }
  if (albumName.indexOf("/") !== -1) {
    return alert("Album names cannot contain slashes.");
  }
  var albumKey = encodeURIComponent(albumName);
  s3.headObject({ Key: albumKey }, function (err, data) {
    if (!err) {
      return alert("Album already exists.");
    }
    if (err.code !== "NotFound") {
      return alert("There was an error creating your album: " + err.message);
    }
    s3.putObject({ Key: albumKey }, function (err, data) {
      if (err) {
        return alert("There was an error creating your album: " + err.message);
      }
      alert("Successfully created album.");
      viewAlbum(albumName);
    });
  });
}
```

## Anzeigen eines Albums
<a name="s3-example-photo-album-viewing-album"></a>

Um den Inhalt eines Albums im Amazon S3 S3-Bucket anzuzeigen, verwendet die `viewAlbum` Funktion der Anwendung einen Albumnamen und erstellt den Amazon S3 S3-Schlüssel für dieses Album. Im Anschluss daran ruft die Funktion die `listObjects`-Methode des `AWS.S3`-Serviceobjekts ab, um eine Liste aller Objekte (Fotos) im Album zu erhalten.

Der Rest der Funktion übernimmt die Liste der Objekte (Fotos) aus dem Album und generiert den erforderlichen HTML-Code, um die Fotos auf der Webseite anzuzeigen. Außerdem ermöglicht die Funktion das Löschen einzelner Fotos sowie die Navigation zurück zur Albumliste.

```
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.Response 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>",
        '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>',
        "</div>",
        "<div>",
        "<span onclick=\"deletePhoto('" +
          albumName +
          "','" +
          photoKey +
          "')\">",
        "X",
        "</span>",
        "<span>",
        photoKey.replace(albumPhotosKey, ""),
        "</span>",
        "</div>",
        "</span>",
      ]);
    });
    var message = photos.length
      ? "<p>Click on the X to delete the photo</p>"
      : "<p>You do not have any photos in this album. Please add photos.</p>";
    var htmlTemplate = [
      "<h2>",
      "Album: " + albumName,
      "</h2>",
      message,
      "<div>",
      getHtml(photos),
      "</div>",
      '<input id="photoupload" type="file" accept="image/*">',
      '<button id="addphoto" onclick="addPhoto(\'' + albumName + "')\">",
      "Add Photo",
      "</button>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
    ];
    document.getElementById("app").innerHTML = getHtml(htmlTemplate);
  });
}
```

## Hinzufügen von Fotos zu einem Album
<a name="s3-example-photo-album-adding-photos"></a>

Um ein Foto in ein Album im Amazon S3 S3-Bucket hochzuladen, verwendet die `addPhoto` Funktion der Anwendung ein Dateiauswahlelement auf der Webseite, um die hochzuladende Datei zu identifizieren. Sie erstellt dann einen Schlüssel zum Hochladen des Fotos aus dem aktuellen Albumnamen und dem Dateinamen.

Die Funktion ruft die `upload` Methode des Amazon S3-Serviceobjekts auf, um das Foto hochzuladen. Nach dem Hochladen des Fotos, zeigt die Funktion das Album erneut an, damit das hochgeladene Foto erscheint.

```
function addPhoto(albumName) {
  var files = document.getElementById("photoupload").files;
  if (!files.length) {
    return alert("Please choose a file to upload first.");
  }
  var file = files[0];
  var fileName = file.name;
  var albumPhotosKey = encodeURIComponent(albumName) + "/";

  var photoKey = albumPhotosKey + fileName;

  // Use S3 ManagedUpload class as it supports multipart uploads
  var upload = new AWS.S3.ManagedUpload({
    params: {
      Bucket: albumBucketName,
      Key: photoKey,
      Body: file,
    },
  });

  var promise = upload.promise();

  promise.then(
    function (data) {
      alert("Successfully uploaded photo.");
      viewAlbum(albumName);
    },
    function (err) {
      return alert("There was an error uploading your photo: ", err.message);
    }
  );
}
```

## Löschen eines Fotos
<a name="s3-example-photo-album-delete-photo"></a>

Um ein Foto aus einem Album im Amazon S3 S3-Bucket zu löschen, ruft die `deletePhoto` Funktion der Anwendung die `deleteObject` Methode des Amazon S3-Serviceobjekts auf. Dies löscht das Foto, das anhand des `photoKey`-Werts an die Funktion übergeben wurde.

```
function deletePhoto(albumName, photoKey) {
  s3.deleteObject({ Key: photoKey }, function (err, data) {
    if (err) {
      return alert("There was an error deleting your photo: ", err.message);
    }
    alert("Successfully deleted photo.");
    viewAlbum(albumName);
  });
}
```

## Löschen eines Albums
<a name="s3-example-photo-album-delete-album"></a>

Um ein Album im Amazon S3 S3-Bucket zu löschen, ruft die `deleteAlbum` Funktion der Anwendung die `deleteObjects` Methode des Amazon S3-Serviceobjekts auf.

```
function deleteAlbum(albumName) {
  var albumKey = encodeURIComponent(albumName) + "/";
  s3.listObjects({ Prefix: albumKey }, function (err, data) {
    if (err) {
      return alert("There was an error deleting your album: ", err.message);
    }
    var objects = data.Contents.map(function (object) {
      return { Key: object.Key };
    });
    s3.deleteObjects(
      {
        Delete: { Objects: objects, Quiet: true },
      },
      function (err, data) {
        if (err) {
          return alert("There was an error deleting your album: ", err.message);
        }
        alert("Successfully deleted album.");
        listAlbums();
      }
    );
  });
}
```