Firebase ist ein Backend as a Service (BAAS), das verschiedene Dienste bereitstellt. Zu den Dienstleistungen gehören Zertifizierung, Cloud-Speicherung, Heben usw. Grundsätzlich ermöglicht es Entwicklern die einfache Integration von Authentifizierung, Datenbanken usw. in Mobil- oder Webanwendungen.
In diesem Tutorial erkunden wir den Cloud-Speicher von Firebase. Wir lernen, ein Bild in Firebase Cloud Storage hochzuladen und die URL des Bildes abzurufen, damit wir es überall verwenden können.
Benutzer sollten die folgenden Schritte ausführen, um ein Firebase-Konto einzurichten und es in eine Single-Page-Webanwendung zu integrieren.
Schritt 1 – Besuchen Sie zunächst die Firebase-Website und erstellen Sie ein Konto.
Schritt 2 – Gehen Sie nun zu https://console.firebase.google.com/u/0/, um die Firebase-Konsole zu öffnen.
Schritt 3 – Klicken Sie nun auf die Schaltfläche „Projekt erstellen“, um mit der Erstellung eines neuen Projekts zu beginnen.
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
// Allow access by all users
allow read, write;
}
}
}
Nach dem Login kopieren
Wir haben jetzt die Einrichtung des Firebase-Projekts zum Hochladen von Bildern aus dem Bucket abgeschlossen.
Beispiel
Das folgende Beispiel ruft die Funktion uploadFile() auf, wenn der Benutzer eine Bilddatei hochlädt. In der Funktion „uploadFile()“ laden wir die Bilddatei in Firebase Storage hoch, rufen die Bild-URL ab und verwenden diese URL, um den Attributwert „src“ des Bildes zu ändern.
Benutzer sollten die folgenden Schritte gemäß dem angegebenen Beispiel befolgen.
Schritt 1 – Fügen Sie Firebase CDN im
-Tag hinzu, um Firebase auf einer einseitigen Website zu verwenden. Schritt 2 – Fügen Sie in HTML einen Fortschrittsbalken hinzu und wir aktualisieren den Fortschritt über JavaScript basierend auf dem Prozentsatz des Bild-Uploads. Fügen Sie außerdem eine Eingabe zum Hochladen einer Datei hinzu. Dadurch sollte die Funktion uplaodFile() aufgerufen werden, wenn der Benutzer eine Datei hochlädt. Fügen Sie außerdem das „img“-Element mit einem leeren „src“-Wert hinzu. Wir werden den „src“-Wert initialisieren, nachdem wir die Download-URL erhalten haben.
Schritt 3 – Greifen Sie in JavaScript auf die Datei zu, wenn der Benutzer sie hochlädt, und verwenden Sie ein Date()-Objekt, um den eindeutigen Dateinamen in der Variablen „fileName“ zu speichern.
Schritt 4 – Initialisieren Sie nun Firebase Storage.
Schritt 5 – Beginnen Sie nun mit dem Hochladen der Bilddatei an den bevorzugten Speicherort im Bucket und laden Sie den Fortschrittswert basierend auf dem hochgeladenen Prozentsatz hoch.
Schritt 6 – Sobald der Upload abgeschlossen ist, verwenden Sie die Methode getDownalodURL(), um die Bild-URL abzurufen und sie auf den Attributwert „src“ des Bildes festzulegen, das auf der Webseite angezeigt werden soll.
In der Ausgabe kann der Benutzer erkennen, dass das hochgeladene Bild angezeigt wird.
<html>
<head>
<!-- Include Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-storage.js"></script>
<style>
img {
width: 500px;
height: auto;
}
</style>
</head>
<body>
<h2>Uploading image to <i>Firebase and getting URL.</i></h2>
<h3>Upload image file below.</h3>
<form>
<!-- Showing image uploading progress bar -->
<progress value = "0" id = "progressBar" max = "100"> 0% </progress> <br> <br>
<!-- file input -->
<input id = "file" type = "file" onchange = "uploadFile()"> <br> <br>
<!-- Showing uploaded image -->
<img src = "" alt = "" id = "uploadedImage">
</form>
<script>
// Firebase configurations
var config = {
apiKey: "AIzaSyBsYILuhF4wOGOe0rFhPudhVWO3cGh2z18",
authDomain: "localhost",
projectId: "test-application-45005",
storageBucket: "gs://test-application-45005.appspot.com",
};
// Initialize the Firebase app
firebase.initializeApp(config);
var currentFile;
function uploadFile() {
var fileInput = document.getElementById("file");
// select the uploaded file
currentFile = fileInput.files[0];
// give a unique name to the file
var fileName = "image-" + Date.now();
// Give reference to the bucket path where we require to store the uploaded image
var storageRef = firebase.storage().ref('/images/' + fileName);
// upload file to selected storage reference
var uploadingElement = storageRef.put(currentFile);
// When uploading of the image starts, change the value of the progress bar
uploadingElement.on('state_changed', (uploadingImage) => {
var progress =
(uploadingImage.bytesTransferred / uploadingImage.totalBytes) * 100;
var progressBar = document.getElementById('progressBar');
progressBar.value = progress;
}, function (error) {
console.log(error);
}, function () {
// Get the image URL
uploadingElement.snapshot.ref.getDownloadURL().then(
function (imageURL) {
// set image URL as a value of the 'src' attribute of the image element
let img = document.getElementById('uploadedImage');
img.src = imageURL;
});
});
}
</script>
</body>
</html>
Nach dem Login kopieren
Der Benutzer hat gelernt, mit JavaScript Bilder in Firebase Cloud Storage hochzuladen und die Bild-URL abzurufen. In einer Live-App ist es nützlich, die URL des hochgeladenen Bildes für das Profilfoto des Benutzers und andere Bilder abzurufen, wenn Firebase verwendet wird.
Darüber hinaus ermöglicht Firebase Entwicklern die Einrichtung eines sehr schnellen Setups zum Hochladen von Bildern und zum Abrufen ihrer URLs.
Das obige ist der detaillierte Inhalt vonFirebase-URL abrufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
