Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

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. Folglich wird die Leistung Ihrer Anwendung verbessert, indem schnellere Ladezeiten und ein besseres Bild gewährleistet werden Qualität.

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 a an Bewölkt Konto.

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 Hochladen Schaltfläche, um die Seite mit den Upload-Einstellungen zu öffnen.

Gehen Sie jetzt zu den Voreinstellungen hochladen Abschnitt Einstellungen 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 aus ohne Vorzeichen Modus aus dem angezeigten Dropdown-Menü. 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, fahren Sie fort und klicken Sie 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.

Um loszulegen, Erstellen Sie eine Demo-React-Anwendung. Führen Sie als Nächstes den folgenden Befehl aus, um den Entwicklungsserver hochzufahren und zu navigieren http://localhost: 3000 in Ihrem Browser, um die Ergebnisse anzuzeigen.

npm starten

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 installiert 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:

importieren Reagieren, {useState} aus'reagieren';
importieren Axios aus"axios";
FunktionHochladen() {
konst [UploadFile, setUploadFile] = useState("");
konst [CloudinaryImage, setCloudinaryImage] = useState("")


konst handleUpload = (e) => {
 e.preventDefault();
konst Formulardaten = neu Formulardaten ();
 formData.append("Datei", Datei hochladen);
 formData.append("upload_preset", "Name Ihrer Upload-Voreinstellung");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Wolkenname/Bild/Hochladen",
 Formulardaten
 )
 .Dann((Antwort) => {
Konsole.log (Antwort);
 setCloudinaryImage (response.data.secure_url);
 })
 .fangen((Fehler) => {
Konsole.log (Fehler);
 });
 };
zurückkehren ( 
"App"> 
"linke Seite"> 


 Bilder in Cloudinary Cloud Storage hochladen</h3>


"Datei"
 onChange ={(event) => {setUploadFile (event.target.files[0]);}} 
 />
 </div>

So funktioniert der Upload-Code:

  • Erklärt zwei Staaten, Datei hochladen 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.
  • Der handleHochladen Die 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 sichere_url des Cloudinary-Bildes im Zustand.
  • 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 Medienbibliothek Registerkarte, um die hochgeladene Datei anzuzeigen.

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.

<SkriptQuelle=" https://upload-widget.cloudinary.com/global/all.js"
 type="text/javascript">Skript>

Fügen Sie als Nächstes in Ihrer Datei upload.js die folgenden Änderungen hinzu:

  • Importieren Sie Folgendes Haken reagieren: useEffect und useRef. 
    importieren {useState, useEffect, useRef} aus'reagieren';
  • Fügen Sie den folgenden Code hinzu: 
    konst cloudinaryRef = useRef();
    konst WidgetRef = useRef();
     useEffect(() => {
     cloudinaryRef.aktuell = Fenster.bewölkt;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     Wolkenname: 'Ihr Cloudinary-Cloud-Name', 
     UploadPreset: 'Name der Upload-Voreinstellung'
     }, (Fehler, Ergebnis) => { 
    Konsole.log (Fehler, Ergebnis)
     });
     }, []);
    Der obige Code erstellt mithilfe des useRef-Hooks eine Referenz auf das Cloudinary-Objekt und das Upload-Widget. Der Hook useEffect führt den Code innerhalb des Callbacks einmal aus, wenn die Komponente bereitgestellt wird. Anschließend initialisieren Sie das Widget mit Ihrem Cloud-Namen und laden den voreingestellten Namen hoch und protokollieren die Ergebnisse und Fehler, die vom Widget auftreten können.
  • Erstellen Sie schließlich eine Schaltfläche, die beim Klicken das Upload-Widget aufruft und öffnet.

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.