So hosten Sie Bilddateien auf Cloudinary in einer React-Anwendung
Viele Anwendungen sind für ihren Inhalt auf das Internet angewiesen. Indem Sie Bild-Assets auf einer Cloud-Plattform eines Drittanbieters hosten, können Sie sicherstellen, dass Ihre Apps schnellen und effizienten Zugriff darauf haben.
Darüber hinaus vermeiden Sie die Speicher- und Bandbreitenkosten, die Ihnen beim Hosten der Assets mit lokalen Servern entstehen würden. Aus diesem Grund werden Cloud-Lösungen zum Hosten von Bildern wie Cloudinary immer beliebter.
Folgen Sie den Anweisungen, um zu erfahren, wie Sie Cloudinary zum Hosten Ihrer Bild-Assets verwenden.
Was ist Image-Hosting und warum ist es wichtig?
Bildhosting ist eine Art von Webhostingdienst, mit dem Sie Ihre Bildbestände oder andere digitale Medien auf einer Cloud-Plattform eines Drittanbieters speichern und darauf zugreifen können.
Medien-Assets wie Bilder sind unerlässlich, um eine großartige Benutzererfahrung für jede Webanwendung zu schaffen. Bild-Hosting-Dienste machen es Ihnen leicht, Ihre Assets aus der Cloud hochzuladen, zu speichern, abzurufen und zu verwalten, wodurch die Leistung Ihrer Anwendung verbessert wird, indem kürzere Ladezeiten und eine bessere Bildqualität gewährleistet werden.
Was ist Cloudinary?
Cloudinary ist eine Cloud-basierte Medienverwaltungsplattform. Es bietet Funktionen, die Ihnen das Hochladen, Speichern und Verwalten digitaler Medieninhalte wie Bilder und Videos erleichtern. Im Wesentlichen erleichtert Cloudinary die Verwaltung aller Ihrer digitalen Medien, die für jede Anwendung benötigt werden, von einer Plattform aus.
Richten Sie ein Cloudinary-Projekt zum Hosten von Bilddateien ein
Um mit dem Hochladen und Hosten von Bilddateien zu beginnen, melden Sie sich für ein Cloudinary – Konto an.
Melden Sie sich bei Ihrem Konto-Dashboard an und klicken Sie im linken Menübereich auf die Registerkarte mit den Einstellungen.
Klicken Sie auf der Einstellungsseite auf die Schaltfläche Hochladen , um die Seite mit den Upload-Einstellungen zu öffnen.
Gehen Sie nun zum Abschnitt Einstellungen für Upload-Voreinstellungen und klicken Sie auf Upload- Voreinstellung hinzufügen , um eine neue Upload-Voreinstellung für Ihre Anwendung zu erstellen.
Eine Upload-Voreinstellung ist eine Konfiguration von Parametern, die die Standardstruktur jeder Mediendatei definieren, die Sie auf Cloudinary hochladen. Mit ihnen können Sie eine Reihe von Regeln definieren, die jedes Mal angewendet werden, wenn Sie eine Mediendatei hochladen.
Die voreingestellten Parameter stellen sicher, dass Cloudinary alle Mediendateien für die Lieferung an Ihre Anwendung optimiert, die Leistung verbessert und die Ladezeit verkürzt.
Geben Sie den Namen Ihrer Voreinstellung ein und wählen Sie den unsignierten Modus aus dem angezeigten Dropdown-Menü aus. Mit den Signaturmodi können Sie die Methoden angeben, die Cloudinary verwendet, um alle Medien-Uploads zu authentifizieren und zu autorisieren.
Wenn Sie den unsignierten Modus auswählen, können Sie von Ihren Anwendungen aus Uploads in Ihren Cloudinary-Speicher vornehmen, ohne sich bei Cloudinary zu authentifizieren. Einfach ausgedrückt: In diesem Modus können Sie ein Bild auswählen und es direkt aus Ihrer Anwendung hochladen. Cloudinary wird es dann auf Anfrage liefern.
Nachdem Sie diese Änderungen vorgenommen haben, klicken Sie auf Speichern , um die Upload-Voreinstellung zu erstellen.
Erstellen Sie eine Demo-React-Anwendung
Sie können eine einfache React-Anwendung einrichten, um die Upload-Funktionalität mit dem Cloudinary-API-Endpunkt und dem Upload-Widget zu handhaben.
Erstellen Sie zunächst eine Demo-React-Anwendung. Führen Sie als Nächstes den folgenden Befehl aus, um den Entwicklungsserver hochzufahren, und navigieren Sie in Ihrem Browser zu http://localhost:3000, um die Ergebnisse anzuzeigen.
npm start
Führen Sie als Nächstes diesen Befehl aus, um Axios zu installieren, eine JavaScript-Bibliothek, die zum Erstellen von HTTP-Anforderungen vom Browser verwendet wird.
npm install axios
Hochladen von Bilddateien mit dem Cloudinary-API-Endpunkt
Erstellen Sie nach dem Einrichten der React-App eine Upload-Komponente, die eine POST-Anforderung an den API-Endpunkt von Cloudinary sendet, um Bilddateien in den Cloud-Speicher von Cloudinary hochzuladen. Anschließend destrukturieren Sie die API-Antwort, um das hochgeladene Bild anzuzeigen.
Erstellen Sie eine Upload-Komponente
Erstellen Sie im Verzeichnis „/src“ einen neuen Ordner und nennen Sie ihn „components“. Erstellen Sie in diesem Ordner eine neue Datei, Upload.js.
Fügen Sie in der Upload.js-Datei den folgenden Code hinzu:
import React, {useState} from 'react';
import Axios from "axios";
function Upload() {
const [uploadFile, setUploadFile] = useState("");
const [cloudinaryImage, setCloudinaryImage] = useState("")
const handleUpload = (e) => {
e.preventDefault();
const formData = new FormData ();
formData.append("file", uploadFile);
formData.append("upload_preset", "your upload preset name");
Axios.post(
"https://api.cloudinary.com/v1_1/your Cloudinary cloud name/image/upload",
formData
)
.then((response) => {
console.log(response);
setCloudinaryImage(response.data.secure_url);
})
.catch((error) => {
console.log(error);
});
};
return (
<div className="App">
<section className="left-side">
<form>
<h3> Upload Images to Cloudinary Cloud Storage</h3>
<div>
<input type="file"
onChange ={(event) => {setUploadFile(event.target.files[0]);}}
/>
</div>
<button onClick = {handleUpload}> Upload File</button>
</form>
</section>
<section className="right-side">
<h3>The resulting image will be displayed here</h3>
{cloudinaryImage && (<img src={cloudinaryImage} />)}
</section>
</div>
);
}
export default Upload;
So funktioniert der Upload-Code:
- Deklariert zwei Zustände, uploadFile und cloudinaryImage . Es verwendet diese, um die hochgeladene Datei und das resultierende Bild von Cloudinary zu speichern.
- Über das Eingabefeld können Sie eine Bilddatei aus dem Dateisystem Ihrer Maschine auswählen. Wenn Sie eine Datei auswählen, wird der Wert der Variable uploadFile aktualisiert.
- Die handleUpload- Funktion verwendet Axios, um eine Post-Anfrage an Cloudinary zu stellen. Es übergibt die hochgeladene Datei und die Upload-Voreinstellung, die Sie mit Ihrem Cloudinary-Cloud-Konto verknüpft haben. Durch Klicken auf die Schaltfläche Senden wird diese Funktion aufgerufen.
- Wenn der Code eine Antwort erhält, speichert er die secure_url des Cloudinary-Images in state.
- Schließlich werden zwei Abschnitte gerendert, einer zum Hochladen der Datei und der andere zum Anzeigen des resultierenden Bildes.
Importieren und rendern Sie die upload.js-Komponente in Ihrer app.js-Datei. Sie sollten eine Antwort wie diese in Ihrem Browser sehen, nachdem Sie die Bilddatei ausgewählt und hochgeladen haben:
Gehen Sie zu Ihrem Cloudinary-Konto und klicken Sie auf die Registerkarte Medienbibliothek , um die hochgeladene Datei anzuzeigen.
Laden Sie Bilddateien mit dem Cloudinary-Widget hoch
Die Integration des Cloudinary-Widgets in Ihre React-Anwendung vereinfacht den Upload-Prozess erheblich. Darüber hinaus können Sie mit dem Widget Bilddateien aus verschiedenen Quellen wie Dropbox hochladen.
Um das Widget in Ihre React-App zu integrieren, müssen Sie zunächst die Remote-JavaScript-Bibliothek des Widgets in Ihre index.html-Datei im /public-Verzeichnis aufnehmen. Fügen Sie das Skript-Tag unten im Head-Abschnitt Ihrer index.html-Datei hinzu.
<script src="https://upload-widget.cloudinary.com/global/all.js"
type="text/javascript"></script>
Fügen Sie als Nächstes in Ihrer Datei upload.js die folgenden Änderungen hinzu:
- Importieren Sie die folgenden React-Hooks: useEffect und useRef.
import {useState, useEffect, useRef} from 'react'; - Fügen Sie den folgenden Code hinzu:
const cloudinaryRef = useRef();
const widgetRef = useRef();
useEffect(() => {
cloudinaryRef.current = window.cloudinary;
widgetRef.current = cloudinaryRef.current.createUploadWidget({
cloudName: 'your cloudinary cloud name',
uploadPreset: 'the upload preset name'
}, (error, result) => {
console.log(error, result)
});
}, []); - Erstellen Sie schließlich eine Schaltfläche, die beim Klicken das Upload-Widget aufruft und öffnet.
<button onClick = { () => widgetRef.current.open()} >
Upload Via Widget
</button>
Cloudinary optimal nutzen
Cloudinary bietet eine benutzerfreundliche Lösung, die den Prozess der Verwaltung von Bilddateien und anderen Medieninhalten vereinfacht.
Neben der Bereitstellung einer Cloud-Speicherplattform bietet Cloudinary auch Funktionen wie Bildtransformationen und Bildoptimierung. Dies sind wichtige Tools zur Verbesserung der Qualität Ihrer Medieninhalte.
Schreibe einen Kommentar