Hochladen von Fotos von einem Browser auf Amazon S3 - AWS SDK for JavaScript

Helfen Sie uns, dasAWS SDK for JavaScriptVersion 3 (V3) -Dokumentation durch Feedback unter Verwendung derFeedbackLink oder erstellen Sie ein Problem oder ziehen Sie eine Anfrage anGitHubaus.

DieAWS SDK for JavaScriptReferenzhandbuch zur V3-API-Referenzbeschreibt ausführlich alle API-Operationen für dieAWS SDK for JavaScriptVersion 3 (V3).

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.

Hochladen von Fotos von einem Browser auf Amazon S3


                JavaScript code example that applies to browser execution

Dieses Beispiel eines Browser-Skriptcodes veranschaulicht:

  • So erstellen Sie eine Browser-Anwendung, mit der Benutzer Fotoalben in einem Amazon-S3-Bucket erstellen und Fotos in die Alben hochladen können.

Das Szenario

In diesem Beispiel stellt eine einfache HTML-Seite eine browserbasierte Anwendung für die Erstellung von Fotoalben in einem Amazon-S3-Bucket bereit, in die 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 Browser-S3-Buckets für Fotoalben verwendet.

Das Browser-Skript verwendet das -SDK für JavaScript, um mit einem Amazon-S3-Bucket zu interagieren. Verwenden Sie die folgenden Methoden der Amazon S3 S3--Client-Klasse, um die Fotoalbumanwendung zu aktivieren:

Erforderliche Aufgaben

Zum Einrichten und Ausführen dieses Beispiels müssen Sie zunächst diese Aufgaben abschließen:

  • Richten Sie die Projektumgebung ein, um diese Node TypeScript-Beispiele auszuführen, und installieren Sie die erforderlichenAWS SDK for JavaScriptund Drittanbieter-Module. Folgen Sie den Anweisungen aufGitHubaus.

  • In derAmazon S3-Konsoleerstellen Sie einen Amazon S3 S3-Bucket, mit dem Sie die Fotos im Album speichern werden. Weitere Informationen zum Erstellen eines Buckets in der Konsole finden Sie unterErstellen eines BucketsimAmazon Simple Storage Service Benutzerhandbuchaus. Stellen Sie sicher, dass Sie über Berechtigungen zum Lesen und Schreiben für Objekte verfügen. Weitere Informationen zur Einrichtung von Bucket-Berechtigungen finden Sie unterFestlegen von Berechtigungen für den Website-Zugriffaus.

  • In derAmazon Cognito Cognito-KonsoleErstellen Sie unter Verwendung von Verbundidentitäten einen Amazon-Cognito-Identitäten-Pool auf den auch nicht authentifizierte Benutzer Zugriff haben und zwar in derselben Region, in der sich der Amazon S3 S3-Bucket befindet. 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 unterAmazon Cognito Cognito-Identitätspools (Verbundidentiten)imAmazon Cognito-Entwicklerhandbuchaus.

  • In derIAM-KonsoleSuchen Sie nach der von Amazon Cognito erstellten IAM-Rolle für nicht authentifizierte Benutzer. Fügen Sie die folgende Richtlinie zum Erteilen von Lese- und Schreibberechtigungen für einen Amazon-S3-Bucket hinzu. Weitere Informationen zum Erstellen einer IAM-Rolle finden Sie unterErstellen einer Rolle zum Delegieren von Berechtigungen an eineAWSBedienungimIAM User Guideaus.

    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.

    { "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

Bevor das Browser-Skript auf den Amazon-S3-Bucket zugreifen kann, müssen Sie zunächst dessenCORS-Konfigurationwie folgt festlegt.

Wichtig

In Amazon S3 auf dem neuenAWSDie CORS-Konfiguration muss 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>

Installieren Sie die erforderlichen SDK-Clients und -Pakete

Installieren Sie die folgenden SDK-Module:

Anmerkung

Weitere Informationen zum Installieren von SDK-Modulen finden Sie unterInstallieren des -SDK für JavaScriptaus.

  • client-S3

  • Client-Kognito-Identität

  • Credential-Anbieter-Cognito-Identität

Installieren Sie Webpack

So verwenden Sie V3 desAWS SDK for JavaScriptim Browser benötigen Sie Webpack, um die Javascript-Module und Funktionen zu bündeln.

Führen Sie in der Befehlszeile Folgendes aus, um Web Pack zu installieren:

npm install --save-dev webpack
Wichtig

Um ein Beispiel für das package.json für dieses Beispiel anzuzeigen, lesen Sie dieAWS SDK for JavaScriptCodebeispiele auf GitHubaus.

Anmerkung

Weitere Informationen zur Installation von Webpack finden Sie unterAnwendungsbündelung mit Webpackaus.

Definieren der Webseite

Der HTML-Code für das Foto-Anzeigeprogramm besteht aus einem<div>-Element, in dem das Browser-Skript die Anzeige/Upload-Schnittstelle erstellt.

Die<script>Element fügt das<main.js>-Datei, die das gesamte erforderliche JavaScript für das Beispiel enthält.

Anmerkung

So generieren Sie den<main.js>-Datei, sieheAusführen des Codesim Folgenden.

Anmerkung

In diesem Beispiel wird das erforderliche importiert und verwendetAWSService V3-Paket-Clients, V3-Befehle und verwendetsend-Methode in einem async/await-Muster. Sie können dieses Beispiel stattdessen mit V2-Befehlen erstellen, indem Sie einige kleinere Änderungen vornehmen. Details hierzu finden Sie unter Verwenden von V3-Befehlen.

<!DOCTYPE html> <html> <head> <script src="./main.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

Rufen Sie die erforderlichen Anmeldedaten zum Konfigurieren des SDK ab, indem Sie denCognitoIdentityCredentials-Methode zur Bereitstellung der Amazon Cognito Cognito-Identitäten-Pool-ID. Erstellen Sie als nächstes eineS3Client-Serviceobjekt.

Anmerkung

In diesem Beispiel wird das erforderliche importiert und verwendetAWSService V3-Paket-Clients, V3-Befehle und verwendetsend-Methode in einem async/await-Muster. Sie können dieses Beispiel stattdessen mit V2-Befehlen erstellen, indem Sie einige kleinere Änderungen vornehmen. Details hierzu finden Sie unter Verwenden von V3-Befehlen.

// 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, PutObjectCommand, ListObjectsCommand, DeleteObjectCommand, DeleteObjectsCommand } = require("@aws-sdk/client-s3"); // Set the AWS Region const REGION = "REGION"; //REGION // Initialize the Amazon Cognito credentials provider const s3 = new S3Client({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: REGION }), identityPoolId: "IDENTITY_POOL_ID", // IDENTITY_POOL_ID }), }); const albumBucketName = "BUCKET_NAME"; //BUCKET_NAME

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

Alben im Bucket auflisten

Die Anwendung erstellt Alben im Amazon-S3-Bucket als Objekte, deren Schlüssel mit einem Schrägstrich beginnen, um anzuzeigen, dass das Objekt als Ordner fungiert. Um alle vorhandenen Alben im -Bucket aufzulisten, ist die AnwendunglistAlbums-Funktion ruft die aufListObjectsCommand-Methode desS3Client-Service-Objekt während der VerwendungcommonPrefixDer Aufruf gibt also nur Objekte zurück, die als Alben verwendet werden.

Der Rest der Funktion übernimmt die Liste der Alben aus dem Amazon-S3-Bucket und generiert den erforderlichen HTML-Code, um die Albumliste auf der Webseite anzuzeigen. Darüber hinaus ermöglicht die Funktion das Löschen und Öffnen einzelner Alben.

Anmerkung

In diesem Beispiel wird das erforderliche importiert und verwendetAWSService V3-Paket-Clients, V3-Befehle und verwendetsend-Methode in einem async/await-Muster. Sie können dieses Beispiel stattdessen mit V2-Befehlen erstellen, indem Sie einige kleinere Änderungen vornehmen. Details hierzu finden Sie unter Verwenden von V3-Befehlen.

// A utility function to create HTML function getHtml(template) { return template.join("\n"); } // Make getHTML function available to the browser window.getHTML = getHtml; // List the photo albums that exist in the bucket const listAlbums = async () => { try { const data = await s3.send( new ListObjectsCommand({ Delimiter: "/", Bucket: albumBucketName }) ); if (data.CommonPrefixes === undefined) { const htmlTemplate = [ "<p>You don't have any albums. You need to create an album.</p>", "<button onclick=\"createAlbum(prompt('Enter album name:'))\">", "Create new album", "</button>", ]; document.getElementById("app").innerHTML = htmlTemplate; } 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 an album name to view it.</p>", "<p>Click the X to delete the album.</p>", ]) : "<p>You do not have any albums. You need to create an album."; const 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); } } catch (err) { return alert("There was an error listing your albums: " + err.message); } }; // Make listAlbums function available to the browser window.listAlbums = listAlbums;

Erstellen eines Albums im Bucket

Um ein Album im Amazon S3 S3-Bucket zu erstellen, ist die AnwendungcreateAlbum-Funktion validiert zunächst den Namen des neuen Albums, um sicherzustellen, dass es geeignete Zeichen enthält. Die Funktion erstellt als nächstes einen Amazon S3 S3-Objektschlüssel, der an dieheadObject-Methode des Amazon 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 noch nicht vorhanden ist, ruft die Funktion denPutObjectCommand-Methode desS3Client-Service-Objekt zum Erstellen des Albums. Anschließend ruft sie die viewAlbum-Funktion ab, um das neue leere Album anzuzeigen.

Anmerkung

In diesem Beispiel wird das erforderliche importiert und verwendetAWSService V3-Paket-Clients, V3-Befehle und verwendetsend-Methode in einem async/await-Muster. Sie können dieses Beispiel stattdessen mit V2-Befehlen erstellen, indem Sie einige kleinere Änderungen vornehmen. Details hierzu finden Sie unter Verwenden von V3-Befehlen.

// Create an album in the bucket const createAlbum = async (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); try { const key = albumKey + "/"; const params = { Bucket: albumBucketName, Key: key }; const data = await s3.send(new PutObjectCommand(params)); alert("Successfully created album."); viewAlbum(albumName); } catch (err) { return alert("There was an error creating your album: " + err.message); } }; // Make createAlbum function available to the browser window.createAlbum = createAlbum;

Anzeigen eines Albums

Um den Inhalt eines Albums im Amazon S3 S3-Bucket anzuzeigen, ist die AnwendungviewAlbum-Funktion nimmt einen Albumnamen an und erstellt den Amazon S3 S3-Schlüssel für dieses Album. Die Funktion ruft dann dielistObjects-Methode desS3Client-Serviceobjekt, 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.

// View the contents of an album const viewAlbum = async (albumName) => { const albumPhotosKey = encodeURIComponent(albumName) + "/"; try { const data = await s3.send( new ListObjectsCommand({ Prefix: albumPhotosKey, Bucket: albumBucketName, }) ); if (data.Contents.length === 1) { var htmlTemplate = [ "<p>You don't have any photos in this album. You need to add photos.</p>", '<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); } else { console.log(data); const href = "https://s3." + REGION + ".amazonaws.com/"; const bucketUrl = href + albumBucketName + "/"; const photos = data.Contents.map(function (photo) { const photoKey = photo.Key; console.log(photo.Key); const 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 the X to delete the photo.</p>" : "<p>You don't have any photos in this album. You need to add photos.</p>"; const 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); document.getElementsByTagName("img")[0].remove(); } } catch (err) { return alert("There was an error viewing your album: " + err.message); } }; // Make viewAlbum function available to the browser window.viewAlbum = viewAlbum;

Hinzufügen von Fotos zu einem Album

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

Die Funktion ruft denputObject-Methode des Amazon S3-Serviceobjekts zum Hochladen des Fotos. Nach dem Hochladen des Fotos, zeigt die Funktion das Album erneut an, damit das hochgeladene Foto erscheint.

// Add a photo to an album const addPhoto = async (albumName) => { const files = document.getElementById("photoupload").files; try { const albumPhotosKey = encodeURIComponent(albumName) + "/"; const data = await s3.send( new ListObjectsCommand({ Prefix: albumPhotosKey, Bucket: albumBucketName }) ); const file = files[0]; const fileName = file.name; const photoKey = albumPhotosKey + fileName; const uploadParams = { Bucket: albumBucketName, Key: photoKey, Body: file }; try { const data = await s3.send(new PutObjectCommand(uploadParams)); alert("Successfully uploaded photo."); viewAlbum(albumName); } catch (err) { return alert("There was an error uploading your photo: ", err.message); } } catch (err) { if (!files.length) { return alert("Choose a file to upload first."); } } }; // Make addPhoto function available to the browser window.addPhoto = addPhoto;

Löschen eines Fotos

Um ein Foto aus einem Album im Amazon S3 S3-Bucket zu löschen, ist die AnwendungdeletePhoto-Funktion ruft die aufDeleteObjectCommandMethode des Amazon S3 S3-Client-Service-Objekts. Dies löscht das Foto, das anhand des photoKey-Werts an die Funktion übergeben wurde.

// Delete a photo from an album const deletePhoto = async (albumName, photoKey) => { try { console.log(photoKey); const params = { Key: photoKey, Bucket: albumBucketName }; const data = await s3.send(new DeleteObjectCommand(params)); console.log("Successfully deleted photo."); viewAlbum(albumName); } catch (err) { return alert("There was an error deleting your photo: ", err.message); } }; // Make deletePhoto function available to the browser window.deletePhoto = deletePhoto;

Löschen eines Albums

Um ein Album im Amazon S3 S3-Bucket zu löschen, ist die AnwendungdeleteAlbum-Funktion ruft die aufdeleteObjectsMethode des Amazon S3 S3-Client-Service-Objekts.

// Delete an album from the bucket const deleteAlbum = async (albumName) => { const albumKey = encodeURIComponent(albumName) + "/"; try { const params = { Bucket: albumBucketName, Prefix: albumKey }; const data = await s3.send(new ListObjectsCommand(params)); const objects = data.Contents.map(function (object) { return { Key: object.Key }; }); try { const params = { Bucket: albumBucketName, Delete: { Objects: objects }, Quiet: true, }; const data = await s3.send(new DeleteObjectsCommand(params)); listAlbums(); return alert("Successfully deleted album."); } catch (err) { return alert("There was an error deleting your album: ", err.message); } } catch (err) { return alert("There was an error deleting your album1: ", err.message); } }; // Make deleteAlbum function available to the browser window.deleteAlbum = deleteAlbum;

Ausführen des Codes

So führen Sie den Code für dieses Beispiel aus

  1. Speichern Sie den gesamten Code unters3_PhotoExample.jsaus.

    Anmerkung

    Diese Datei ist verfügbarhier auf GitHubaus.

  2. Ersetzen„REGION“mit IhremAWS-Region, wie zum Beispiel „us-east-1“.

  3. Ersetzen„BUCKET_NAME“mit Ihrem Amazon S3 S3-Bucket.

  4. Ersetzen„IDENTITY_POOL_ID“mit dem IdentityPoolId aus demBeispielseitedes Amazon Cognito Cognito-Identitäten-Pools, den Sie für dieses Beispiel erstellt haben.

    Anmerkung

    DieIDENTITY_POOL_IDwird in der Konsole rot angezeigt.

  5. Führen Sie Folgendes in der Befehlszeile aus, um das JavaScript für dieses Beispiel in eine Datei mit dem Namen zu bündeln<main.js>:

    webpack s3_PhotoExample.ts --mode development --target web --devtool false -o main.js
    Anmerkung

    Weitere Informationen zur Installation von WebPack finden Sie unterAnwendungsbündelung mit Webpackaus.

Führen Sie in der Befehlszeile Folgendes aus:

node s3_PhotoUploader.ts