[PYTHON] POST das ausgewählte Bild auf der Website mit mehrteiligen / Formulardaten und speichere es in Amazon S3! !!
Was ich machen wollte
Nachdem ich eine Bilddatei auf der Website ausgewählt hatte, wollte ich das Bild mit mehrteiligen / Formulardaten mit der Schaltfläche zum Hochladen POSTEN und es in S3 unter AWS speichern, also fand ich heraus, wie es geht. Dies kann hilfreich sein, wenn Sie AWS-Services verwenden möchten, einschließlich des Speicherns von Bildern auf Ihrer Website.
Gesamtkonfigurationsdiagramm
Website-Bild
Entwicklungssprache und Service verwendet
Wir verwenden ** HTML, CSS, JavaScript ** als Entwicklungssprache auf der Webseite und ** Python 3.7 ** als Sprache auf der Lambda-Seite. Im Folgenden sind die verwendeten Dienste aufgeführt.
** ・ AWS Lambda ** Ein AWS-Service, mit dem Sie durch ein Ereignis ausgelösten Funktionscode ausführen können. ** - Amazon S3 (zum Speichern hochgeladener Bilder und zum Veröffentlichen von Websites) ** Abkürzung für Simple Storage Service, AWS Online Storage Service
Nachdem Sie das Bild in Form von mehrteiligen / Formulardaten auf der Webseite mit Ajax veröffentlicht haben, starten Sie Lambda, indem Sie auf API Gateway klicken, und speichern Sie das Bild in S3 mit der Funktion in Lambda. Speichern Sie als Bonus den Dateinamen des gespeicherten Bildes im lokalen Speicher der Site, damit Sie das gespeicherte Bild durchsuchen können.
Gesamterstellungsprozess
- Website erstellen (# web-Site erstellen)
- [Bucket für Bildspeicherung in S3 erstellen](-bucket-Create für Bildspeicherung in # s3-)
- Erstellen Sie Lambda (einschließlich API-Gateway) (Erstellen Sie # Lambda-einschließlich API-Gateway).
Es wird zum Verfahren.
Erstellen einer Website
Vollständiger Code auf der Website-Seite
Dieses Mal habe ich die Form des POSTing an die API in Form von mehrteiligen / Formulardaten von der Website-Seite verwendet. Wir führen auch eine Verarbeitung durch, um den Übergang zu einem anderen Bildschirm zu verhindern, wenn auf die Schaltfläche "Senden" geklickt wird, und ändern den Stil verschiedener Schaltflächen.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--jquery Bibliothek ist nicht behoben-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Title</title>
<style>
label > input {
display:none; /*Deaktivieren Sie den Dateischaltflächenstil*/
}
label > button {
display:none; /*Deaktivieren Sie den Schaltflächenstil*/
}
label {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #fd9535;/*Knopffarbe*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
button{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #fd9535;/*Knopffarbe*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
label:active {
/*Wenn Sie die Taste drücken*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*Sich abwärts bewegen*/
border-bottom: none;/*Löschen Sie die Zeile*/
}
button:active{
/*Wenn Sie die Taste drücken*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*Sich abwärts bewegen*/
border-bottom: none;/*Löschen Sie die Zeile*/
}
</style>
</head>
<body>
<form action="xxx Wo soll die API-Gateway-URL eingegeben werden? xxx" method="post" enctype="multipart/form-data" id="imgForm" target="sendPhoto">
<p>
<label for ="upfile">
Bitte wählen Sie die Datei
<input type="file" name="fileName" id="upfile" accept="image/*" capture="camera">
</label>
<span style="color: #ff0000;" data-mce-style="color: #ff0000;"><div><img id="thumbnail" src=""></div></span>
</p>
<p>
<label for="upload">
hochladen
<button type="submit" action="" name="save" id="upload" >upload</button>
</label>
</p>
<p id="compUpload"></p>
</form>
<iframe name="sendPhoto" style="width:0px;height:0px;border:0px;"></iframe>
<script>
$('#upfile').change(function(){
if (this.files.length > 0) {
//Informationen zu ausgewählten Dateien abrufen
var file = this.files[0];
//Speichern Sie verschlüsselte Dateidaten als Daten-URL in der Ergebniseigenschaft des Readers
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
$('#thumbnail').attr('src', reader.result );
}
}
});
//Bild hochladen
$('#imgForm').on('submit', function(e) {
e.preventDefault();
var formData = new FormData($('#imgForm').get(0));
$.ajax($(this).attr('action'), {
type: 'post',
processData: false,
contentType: false,
data: formData,
success: document.getElementById('compUpload').innerHTML = 'Hochladen' //Wenn die Übertragung erfolgreich ist
}).done(function(response){
let jsonbody = JSON.parse(response.body);
console.log('succes!'); //Wenn es eine Antwort gibt
//Speichern Sie den Namen der Antwortdatei im lokalen Speicher
var array = [];
var obj = {
'Schlüssel 1': 'Wert 1',
'Schlüssel 2': 'Wert 2'
};
array.push(obj);
var setjson = JSON.stringify(obj);
localStorage.setItem('Schlüssel', jsonbody.message);
document.getElementById('compUpload').innerHTML = 'Upload abgeschlossen'
}).fail(function() {
console.log('error!'); //Wenn ein Fehler auftritt
});
return false;
});
</script>
</body>
</html>
Kopieren Sie den obigen Code und fügen Sie ihn ein, um eine HTML-Datei zu erstellen. Platzieren Sie die Datei auf Ihrem Lieblingsserver oder S3 und zeigen Sie sie an. Damit ist die Erstellung auf der Webseite mit Ausnahme von "URL des API-Gateways angeben" abgeschlossen.
API Gateway URL-Spezifikation
Der folgende Code ist das angegebene Teil
python
<body>
<form action="xxx Wo soll die API-Gateway-URL eingegeben werden? xxx" method="post" enctype="multipart/form-data" id="imgForm" target="sendPhoto">
Wir werden dies hinzufügen, wenn wir die API-Gateway-URL in den späteren Schritten zum Erstellen von Lambda kennen. Außerdem war die Standardschaltfläche langweilig, sodass ich das Design mit dem Style-Tag oben im Code geändert habe. Die Standardanzeige wird mit display: none ausgeblendet und dann in ein neues Design geändert.
python
<style>
label > input {
display:none; /*Deaktivieren Sie den Dateischaltflächenstil*/
}
label > button {
display:none; /*Deaktivieren Sie den Schaltflächenstil*/
}
label {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #fd9535;/*Knopffarbe*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
button{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #fd9535;/*Knopffarbe*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
label:active {
/*Wenn Sie die Taste drücken*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*Sich abwärts bewegen*/
border-bottom: none;/*Löschen Sie die Zeile*/
}
button:active{
/*Wenn Sie die Taste drücken*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*Sich abwärts bewegen*/
border-bottom: none;/*Löschen Sie die Zeile*/
}
</style>
Beschreibung des Bild-Upload-Teils
Ich verwende Ajax, um Bilder hochzuladen. Wenn der POST auf der Serverseite erfolgreich ist, zeigt die Webseite an, dass er hochgeladen wird.
python
<script>
//Bild hochladen
$('#imgForm').on('submit', function(e) {
e.preventDefault();
var formData = new FormData($('#imgForm').get(0));
$.ajax($(this).attr('action'), {
type: 'post',
processData: false,
contentType: false,
data: formData,
success: document.getElementById('compUpload').innerHTML = 'Hochladen' //Wenn die Übertragung erfolgreich ist
}).done(function(response){
let jsonbody = JSON.parse(response.body);
console.log('succes!'); //Wenn es eine Antwort gibt
//Speichern Sie den Namen der Antwortdatei im lokalen Speicher
var array = [];
var obj = {
'Schlüssel 1': 'Wert 1',
'Schlüssel 2': 'Wert 2'
};
array.push(obj);
var setjson = JSON.stringify(obj);
localStorage.setItem('Schlüssel', jsonbody.message);
document.getElementById('compUpload').innerHTML = 'Upload abgeschlossen'
}).fail(function() {
console.log('error!'); //Wenn ein Fehler auftritt
});
return false;
});
</script>
Erstellen Sie einen Bucket zum Speichern von Bildern in S3
Verwenden Sie S3 als Speicherort für das Hochladen von Bilddateien aus dem Web. Wählen Sie S3 in der AWS Management Console aus und erstellen Sie einen Bucket. Es wird empfohlen, dass die zu diesem Zeitpunkt angegebene Region mit der bei der späteren Erstellung von Lambda angegebenen Region übereinstimmt. (Da es einige Zeit dauern kann, die Einstellungen in einer anderen Region wiederzugeben.) ⇨ Referenzlink
Standardmäßig gibt es zum Zeitpunkt der Erstellung kein Problem mit den Einstellungen. Deaktivieren Sie in diesem Artikel in den Einstellungen für Zugriffsberechtigungen die Option "Alle öffentlichen Zugriffe blockieren" und legen Sie fest, dass der öffentliche Zugriff zulässig ist. (So zeigen Sie die Antwort in Lambda im Web an) Wenn Sie die Zugriffsberechtigung einzeln festlegen möchten, legen Sie sie nach der Erstellung in der Bucket-Richtlinie fest.
Wenn Sie den Pfad des Buckets angeben, der hier später in Lambda erstellt wurde, wird das hochgeladene Bild gelöscht.
Erstellen Sie Lambda (einschließlich API-Gateway)
Erstellen einer Lambda-Funktion
Lambda führt eine Funktion aus, die ein Bild in S3 speichert, ausgelöst durch einen Bild-POST auf der Webseite. Wählen Sie dazu zunächst Lambda in der AWS Management Console aus und klicken Sie auf Funktion erstellen. Zum Zeitpunkt der Erstellung wurde dieser Artikel in der Region Nord-Virginia erstellt. (Empfohlen mit der in S3 erstellten Region identisch)
Auf dem Bildschirm zur Funktionserstellung wird ・ Von Grund auf neu erstellen -Funktionsname (Geben Sie Ihren bevorzugten Funktionsnamen ein) ・ Laufzeit (diesmal mit Python 3.7) · Ausführungsrolle (wählen Sie Neue Rolle mit grundlegendem Lambda-Zugriff erstellen)
Nachdem Sie diese entschieden haben, klicken Sie auf Funktion erstellen. Hier lautet der Funktionsname myFunctionName.
Die Rolle "Ausführen" gewährt Zugriff auf S3 und Cloud Watch, erstellt sie jedoch zuerst mit grundlegenden Lambda-Berechtigungen und fügt sie später hinzu.
API-Gateway erstellen
Nach Abschluss der Funktionserstellung wird der Funktionsbearbeitungsbildschirm geöffnet. Klicken Sie im Designer-Fenster auf ** Trigger hinzufügen **. Das Fenster wechselt, wählen Sie also ** API Gateway ** und nehmen Sie detaillierte Einstellungen vor.
Auf dem Bildschirm Trigger hinzufügen mit den entsprechenden Dropdown-Feldern und Optionsfeldern ・ API ⇨ Neue API erstellen -Wählen Sie eine Vorlage ⇨ REST-API ・ Sicherheit ⇨ Öffnen ・ Klicken Sie auf zusätzliche Einstellungen ⇨ Binärmedientypen ** image / png ** und ** multipart / form-data ** hinzugefügt Klicken Sie danach unten rechts auf dem Bildschirm auf ** Hinzufügen **.
Dann sollte API Designer zu Designer hinzugefügt werden (siehe Abbildung unten). Dies ist ein Mechanismus, bei dem API Gateway einen POST auf der Webseite empfängt und den Start der Lambda-Funktion auslöst.
Wenn Sie in Designer auf API-Gateway klicken, wird ein ** API-Endpunkt ** angezeigt, der mit https beginnt. Geben Sie diese URL als [Unsicherer Teil beim Erstellen einer Website] ein (# Der folgende Code lautet -url-). Geben Sie ein (Teil).
Klicken Sie anschließend auf den Link "Funktionsname-API", der direkt über dem API-Endpunkt angezeigt wird, um eine API-Methode zu erstellen.
Konfiguration der POST-Methode des API-Gateways
Klicken Sie auf den Link "Funktionsname-API", um die Seite mit den API-Gateway-Einstellungen zu öffnen. Konfigurieren Sie nun die API-POST-Methode so, dass json-formatierte Dateien von Ihrer Website empfangen werden.
-
Klicken Sie in der Aktion auf ** Methode erstellen **, um das Auswahlfeld anzuzeigen (klicken Sie auf den Faltpfeil rechts neben dem Funktionsnamen).
-
Wählen Sie im Auswahlfeld ** POST ** aus und klicken Sie auf das Häkchen
-
Wählen Sie POST aus, wählen Sie die Lambda-Region aus, die Sie auf dem angezeigten Bildschirm verwenden, geben Sie den zuvor erstellten Funktionsnamen in das Eingabefeld ** Lambda-Funktion ** ein und klicken Sie auf Speichern.
-
Klicken Sie auf OK, wenn ein Fenster zum Hinzufügen von Berechtigungen zur Lambda-Funktion angezeigt wird
-
Wählen Sie unter Aktionen die Option CORS aktivieren aus, geben Sie in Advanced Access-Control-Allow-Credentials (einschließlich '')'true' ein, aktivieren Sie CORS und klicken Sie auf Vorhandenen CORS-Header auf Wert ersetzen Hinzufügen.
-
Wählen Sie erneut ** POST ** aus, klicken Sie im Bildschirm zur Methodenausführung auf ** Integrationsanforderung ** und Mapping-Vorlage template wenn keine Vorlage definiert ist (empfohlen) ⇨ Mapping-Vorlage hinzufügen ⇨ ** mehrteilig / Geben Sie die Formulardaten ein ** ** Wählen Sie ** Methode Anforderungsdurchgang ** in Vorlage generieren und speichern
-
Nachdem Sie auf die Schaltfläche Speichern geklickt haben, wählen Sie über ANY ** Funktionsname ** aus, wählen Sie unter Aktionen die Option API bereitstellen aus, wählen Sie die Standardeinstellung für die zu implementierende Stufe aus und klicken Sie dann auf die Schaltfläche Bereitstellen.
Damit sind die API-Einstellungen abgeschlossen. Bitte beachten Sie, dass es viele Schritte gibt und es leicht ist, Fehler zu machen. Als nächstes gehen wir zu den Funktionscodeeinstellungen über, kehren Sie also zum Lambda-Funktionseinstellungsbildschirm zurück. Sie können über den Funktionsnamen des Dienstes ⇨ Lambda return zurückkehren.
①
②
③
④
⑤
⑥
⑦
Beschreibung des Lambda-Funktionscodes
Wenn Sie in Designer auf den Funktionsnamen klicken und einen Bildlauf durchführen, gibt es ein Element zum Schreiben des Funktionscodes. Schreiben Sie den Code also hier in Python. Hier werden die Decodierung des Bildes, die Einstellung des Speicherorts, die Antwort zum Erfassen des Bildnamens auf der Webseite usw. beschrieben.
Voller Funktionscode
lambda_function.py
import json
import boto3
import base64
from datetime import datetime, timezone
def convert_b64_string_to_bynary(s):
"""Decodiere base64"""
def lambda_handler(event, context):
#Einstellung des Bildspeicherorts
s3 = boto3.resource('s3')
bucket = s3.Bucket('xxx Name des Buckets zum Speichern von Bildern xxx')
#Die Binärdatei ist Base64-codiert, also hier dekodieren
imageBody = base64.b64decode(event['body-json'])
TextTime = datetime.now().strftime('%Y-%m-%d-%H-%M-%S') #Stellen Sie den Namen der hochgeladenen Bilddatei auf den Zeitpunkt ein
images = imageBody.split(b'\r\n',4)#Schneiden Sie nur das notwendige Teil mit Split
key = TextTime +".png "
bucket.put_object(
Body = images[4],
Key = key
)
#Rückgabewert zum Abrufen des Bildnamens auf der Webseite
return {
'isBase64Encoded': False,
'statusCode': 200,
'headers': {'Access-Control-Allow-Origin' : '*' ,
'Content-Type' :'application/json'},
'body': '{"message":"'+ key + '"}'
}
Geben Sie nach dem Einfügen des Codes im folgenden Teil den Namen des S3-Buckets ein und speichern Sie den Status mit der Schaltfläche Speichern oben rechts auf dem Bildschirm.
lambda_function.py
bucket = s3.Bucket('xxx Name des Buckets zum Speichern von Bildern xxx')
Umgebungsvariablen einstellen
Legen Sie Umgebungsvariablen fest, um den Zeitstempel an die japanische Zeit anzupassen. Wenn Sie vom Funktionscode-Bildschirm ein wenig nach unten scrollen, finden Sie ein Element für Umgebungsvariablen. Führen Sie die folgenden Schritte aus, um Umgebungsvariablen festzulegen.
- Klicken Sie oben rechts neben dem Umgebungsvariablenelement auf die Schaltfläche Bearbeiten
- Sie werden zur Bearbeitungsseite für Umgebungsvariablen weitergeleitet. Klicken Sie dort auf Umgebungsvariable hinzufügen.
- Geben Sie als Schlüssel "TZ" und als Wert "Asia / Tokyo" ein
- Klicken Sie unten rechts auf die Schaltfläche Speichern
Einstellungen für Ausführungsrollen
Wenn Sie vom Umgebungsvariablenelement ein wenig nach unten scrollen, finden Sie das Einstellungselement für die Ausführungsrolle. Führen Sie die folgenden Schritte aus, um die Ausführungsrolle festzulegen.
- Wählen Sie im ersten Pulldown die Option Vorhandene Rolle verwenden
- Stellen Sie sicher, dass die Richtlinie mit dem aktuell bearbeiteten Funktionsnamen für die vorhandene Rolle ausgewählt ist (Servicerolle / Funktionsname -...).
- Klicken Sie in der IAM-Konsole auf den folgenden Link ** Funktion Funktionsrolle anzeigen **
- Ein neues Fenster wird geöffnet, in dem Sie auf ** Richtlinie anhängen ** klicken können.
- Geben Sie S3 in das Suchfeld ein, überprüfen Sie AmazonS3FullAccess und klicken Sie auf ** Richtlinie anhängen **
Damit sind alle Einstellungen abgeschlossen. Versuchen Sie, das Bild vom Webbildschirm hochzuladen, und es ist erfolgreich, wenn das Bild im entsprechenden Bucket von S3 gespeichert wird. Als Bonus können Sie mit dem Entwicklungstool auch überprüfen, ob der Dateiname beim Hochladen im lokalen Speicher gespeichert ist. Bitte verwenden Sie es, wenn Sie einen Dienst verwenden, der die hochgeladene Datei angibt.
Am Ende
Dieses Mal habe ich auf S3-Bilder mit einem Dienst namens Amazon Rekognition Custom Labels in AWS verwiesen, daher habe ich eine solche Funktion implementiert. Wenn Sie interessiert sind, lesen Sie bitte den Artikel unten für die Benutzerfreundlichkeit. Informationen zur Benutzerfreundlichkeit von benutzerdefinierten Amazon Rekognition-Labels
Referenzlink
Warum gibt Amazon S3 eine temporäre HTTP 307-Umleitungsantwort zurück? So verhindern Sie den Bildschirmübergang während der POST-Verarbeitung mit Form