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

Hilf uns, das zu verbessernAWS SDK for JavaScriptVersion 3 (V3) -Dokumentation, indem Sie Feedback mithilfe derFeedbackverlinken, oder erstellen Sie ein Issue oder Pull Request aufGitHubaus.

DieAWS SDK for JavaScriptReferenzhandbuch zur V3-APIbeschreibt ausführlich alle API-Operationen für denAWS 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 nach 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 S3-Bucket erstellen und Fotos in die Alben hochladen können.

Das Szenario

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


                JavaScriptin einem Browser-Skript, in dem Amazon S3 S3-Buckets für Fotoalben verwendet werden.

Das Browser-Skript verwendet das SDK fürJavaScriptum mit einem Amazon S3 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 diesen Node auszuführenTypeScriptBeispiele, und installieren Sie das erforderlicheAWS SDK for JavaScriptund Drittanbieter-Module. Folgen Sie den Anweisungen aufGitHubaus.

  • In derAmazon S3-Konsoleerstellen Sie einen Amazon S3 S3-Bucket, in dem Sie die Fotos des Albums speichern werden. Weitere Informationen zum Erstellen eines Buckets in der -Konsole finden Sie unterErstellen eines BucketsimBenutzerhandbuch für Amazon Simple Storage Serviceaus. 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-Konsoleerstellen Sie unter Verwendung von Verbundidentitäten einen Amazon Cognito 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 über Amazon Cognito Verbundidentitäten finden Sie im Folgenden:Amazon Cognito Cognito-Identitätspools (Verbundidentitäten)imAmazon Cognito-Entwicklerhandbuchaus.

  • In derIAM-KonsoleSuchen Sie nach der IAM-Rolle, die von Amazon Cognito für nicht authentifizierte Benutzer erstellt wurde. Fügen Sie die folgende Richtlinie zum Erteilen von Lese- und Schreibberechtigungen für einen Amazon S3 S3-Bucket hinzu. Weitere Informationen zum Erstellen einer IAM-Rolle finden Sie unterErstellen einer Rolle zum Delegieren von Berechtigungen an einenAWSBedienungimIAM 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 S3-Bucket zugreifen kann, müssen Sie zuerst dessenCORS-Konfigurationwie folgt festlegt.

Wichtig

In Amazon S3 auf dem neuenAWSWeb Services Management Console 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>

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

  • Credential-Anbieter

  • credential-provider-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 das 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 aufGitHubaus.

Anmerkung

Weitere Informationen zur Installation von Webpack finden Sie unterBündeln von Anwendungen 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 alle erforderlichenJavaScriptfür das Beispiel.

Anmerkung

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

Anmerkung

In diesem Beispiel wird das erforderliche importiert und verwendetAWSService V3-Paket-Clients, V3-Befehle und verwendet diesend-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

Um die erforderlichen Anmeldeinformationen zum Konfigurieren des SDK zu erhalten, indem Sie denCognitoIdentityCredentials-Methode, die ID des Amazon Cognito Cognito-Identitäten-Pools. Erstellen Sie als Nächstes eineS3Client-Serviceobjekt.

Anmerkung

In diesem Beispiel wird das erforderliche importiert und verwendetAWSService V3-Paket-Clients, V3-Befehle und verwendet diesend-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 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 aufzuführen, ist die AnwendunglistAlbums-Funktion ruft denListObjectsCommand-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 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 verwendet diesend-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,createAlbum-Funktion validiert zuerst den Namen des neuen Albums, um sicherzustellen, dass es geeignete Zeichen enthält. Die Funktion erstellt dann einen Amazon S3 S3-Objektschlüssel und übergibt ihn an dieheadObject-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 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 verwendet diesend-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 übernimmt einen Albumnamen und erstellt den Amazon S3 S3-Schlüssel für dieses Album. Die Funktion ruft dann dielistObjects-Methode desS3-Client-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 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 denDeleteObjectCommandMethode 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,deleteAlbum-Funktion ruft dendeleteObjectsMethode 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 aufGitHubaus.

  2. Ersetzen„REGION“mit IhremAWSRegion, z. B. „us-east-1“.

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

  4. Ersetzen„IDENTITY_POOL_ID“mit demIdentityPoolId ausBeispielseitedes Amazon Cognito Identitäten-Pool, den Sie für dieses Beispiel erstellt haben.

    Anmerkung

    DieIDENTITY_POOL_IDwird in der -Konsole rot angezeigt.

  5. Führen Sie in der Befehlszeile Folgendes aus, um dieJavaScriptfür dieses Beispiel in einer Datei namens<main.js>:

    npx webpack ./src/s3_PhotoExample.js --mode development --target web --no-devtool -o main.js
    Anmerkung

    Weitere Informationen zur InstallationWebPack, finden Sie unterBündeln von Anwendungen mit Webpackaus.

Führen Sie in der Befehlszeile Folgendes aus:

node s3_PhotoExample.js