Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Veel applicaties zijn voor hun inhoud afhankelijk van internet. Door afbeeldingen op een extern cloudplatform te hosten, kunt u ervoor zorgen dat uw apps er snel en efficiënt toegang toe hebben.

Bovendien vermijdt u de opslag- en bandbreedtekosten die u zou moeten maken bij het hosten van de activa met behulp van on-premise servers. Dit is de reden waarom cloudoplossingen voor het hosten van afbeeldingen, zoals Cloudinary, steeds populairder worden.

Volg mee en leer hoe u Cloudinary kunt gebruiken om uw afbeeldingsitems te hosten.

Wat is beeldhosting en waarom is het belangrijk?

Afbeeldingshosting is een type webhostingservice waarmee u uw afbeeldingsitems of andere digitale media kunt opslaan en openen op een extern cloudplatform.

Media-items zoals afbeeldingen zijn essentieel voor het creëren van een geweldige gebruikerservaring voor elke webtoepassing. Hostingservices voor afbeeldingen maken het u gemakkelijk om uw activa vanuit de cloud te uploaden, op te slaan, op te halen en te beheren, bijgevolg de prestaties van uw applicatie verbeteren door te zorgen voor snellere laadtijden en een beter imago kwaliteit.

instagram viewer

Wat is bewolking?

Cloudinary is een cloudgebaseerd platform voor mediabeheer. Het biedt functies waarmee u gemakkelijk digitale media-items zoals afbeeldingen en video's kunt uploaden, opslaan en beheren. In wezen maakt Cloudinary het gemakkelijker om al uw digitale media die nodig zijn voor elke toepassing vanaf één platform te beheren.

Stel een cloudinair project in om afbeeldingsbestanden te hosten

Om aan de slag te gaan met het uploaden en hosten van afbeeldingsbestanden, meldt u zich aan voor een Bewolkt rekening.

Log in op uw accountdashboard en klik op het instellingenpictogramtabblad in het linkermenuvenster.

Klik op de instellingenpagina op de Uploaden knop om de pagina met uploadinstellingen te openen.

Ga nu naar de Voorinstellingen uploaden instellingen sectie en klik op Uploadvoorinstelling toevoegen om een ​​nieuwe uploadvoorinstelling voor uw toepassing te maken.

Een uploadvoorinstelling is een configuratie van parameters die de standaardstructuur bepalen van elk mediabestand dat u uploadt op Cloudinary. Hiermee kunt u een reeks regels definiëren die elke keer dat u een mediabestand uploadt, moeten worden toegepast.

De vooraf ingestelde parameters zorgen ervoor dat Cloudinary alle mediabestanden optimaliseert voor levering aan uw applicatie, waardoor de prestaties worden verbeterd en de laadtijd wordt verkort.

Vul de naam van je preset in en selecteer ongetekend modus in het weergegeven vervolgkeuzemenu. Met de ondertekeningsmodi kunt u de methoden specificeren die Cloudinary gebruikt om media-uploads te verifiëren en te autoriseren.

Als u de niet-ondertekende modus selecteert, kunt u vanuit uw applicaties uploads naar uw Cloudinary-opslag maken zonder te authenticeren met Cloudinary. Simpel gezegd, in deze modus kunt u een afbeelding selecteren en deze rechtstreeks vanuit uw applicatie uploaden. Cloudinary zal deze dan op verzoek leveren.

Nadat je deze wijzigingen hebt aangebracht, ga je gang en klik je Redden om de uploadvoorinstelling te maken.

Maak een demo React-applicatie

U kunt een eenvoudige React-applicatie opzetten om de uploadfunctionaliteit te verwerken met behulp van het Cloudinary API-eindpunt en de uploadwidget.

Starten, maak een demo React-applicatie. Voer vervolgens de onderstaande opdracht uit om de ontwikkelingsserver te laten draaien en naar te navigeren http://localhost: 3000 in uw browser om de resultaten te bekijken.

npm begin

Voer vervolgens deze opdracht uit om Axios te installeren, een JavaScript-bibliotheek die wordt gebruikt voor het maken van HTTP-verzoeken vanuit de browser.

npm axios installeren

Upload afbeeldingsbestanden met behulp van het Cloudinary API-eindpunt

Na het instellen van de React-app, maakt u een uploadcomponent die een POST-verzoek doet aan het API-eindpunt van Cloudinary om afbeeldingsbestanden te uploaden naar de cloudopslag van Cloudinary. Vervolgens destructureer je de API-respons om de geüploade afbeelding weer te geven.

Maak een uploadcomponent

Maak in de map /src een nieuwe map en noem deze componenten. Maak in deze map een nieuw bestand, Upload.js.

Voeg in het bestand Upload.js de onderstaande code toe:

importeren Reageer, {useState} van'Reageer';
importeren Axio's van"axios";
functieUploaden() {
const [uploadFile, setUploadFile] = useState("");
const [cloudinaryImage, setCloudinaryImage] = useState("")


const handleUpload = (e) => {
 e.preventDefault();
const formulierData = nieuw Formuliergegevens ();
 formData.toevoegen("bestand", upload bestand);
 formData.toevoegen("upload_voorinstelling", "uw vooraf ingestelde uploadnaam");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Cloudinary cloud naam/afbeelding/upload",
 formulierGegevens
 )
 .Dan((antwoord) => {
troosten.log (antwoord);
 setCloudinaryImage (response.data.secure_url);
 })
 .vangst((fout) => {
troosten.log (fout);
 });
 };
opbrengst ( 
"App"> 
"linkerkant"> 


 Upload afbeeldingen naar Cloudinary Cloud Storage</h3>


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

Dit is wat de uploadcode doet:

  • Verklaart twee staten, upload bestand En bewolkt Afbeelding. Het gebruikt deze om het geüploade bestand en de resulterende afbeelding van Cloudinary op te slaan.
  • Met het invoerveld kunt u een afbeeldingsbestand uit het bestandssysteem van uw machine selecteren. Wanneer u een bestand selecteert, wordt de waarde van de variabele uploadFile bijgewerkt.
  • De handleUploaden functie gebruikt Axios om een ​​postverzoek naar Cloudinary te sturen. Het wordt doorgegeven aan het geüploade bestand en de uploadvoorinstelling die u aan uw Cloudinary-cloudaccount hebt gekoppeld. Als u op de verzendknop klikt, wordt deze functie opgeroepen.
  • Wanneer de code een antwoord ontvangt, slaat het de veilige_url van het Cloudinary-beeld in staat.
  • Ten slotte worden er twee secties weergegeven, een voor het uploaden van het bestand en de andere voor het weergeven van de resulterende afbeelding.

Importeer en render de component upload.js in uw app.js-bestand. U zou een reactie als deze in uw browser moeten zien zodra u het afbeeldingsbestand selecteert en uploadt:

Ga naar uw Cloudinary-account en klik op de Mediatheek tabblad om het geüploade bestand te bekijken.

Het integreren van de Cloudinary-widget in uw React-applicatie vereenvoudigt het uploadproces aanzienlijk. Bovendien kunt u met de widget afbeeldingsbestanden uploaden vanuit verschillende bronnen, zoals Dropbox.

Om de widget in uw React-app te integreren, moet u eerst de externe JavaScript-bibliotheek van de widget opnemen in uw index.html-bestand in de map /public. Voeg de onderstaande scripttag toe aan de kopsectie in uw index.html-bestand.

<scriptsrc=" https://upload-widget.cloudinary.com/global/all.js"
 typ="tekst/javascript">script>

Voeg vervolgens in uw upload.js-bestand de volgende wijzigingen toe:

  • Importeer het volgende Reageer haken: useEffect en useRef. 
    importeren {useState, useEffect, useRef} van'Reageer';
  • Voeg onderstaande code toe: 
    const cloudinaryRef = useRef();
    const widgetRef = gebruikRef();
     gebruikEffect(() => {
     bewolktRef.current = raam.bewolkt;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     cloudnaam: 'uw bewolkte wolk naam', 
     uploadPreset: 'de naam van de uploadvoorinstelling'
     }, (fout, resultaat) => { 
    troosten.log (fout, resultaat)
     });
     }, []);
    De bovenstaande code maakt een verwijzing naar het Cloudinary-object en de uploadwidget met behulp van de useRef-hook. De useEffect hook voert de code binnen de callback één keer uit wanneer de component wordt gemount. Vervolgens initialiseert u de widget met uw cloudnaam en uploadt u de vooraf ingestelde naam en registreert u de resultaten en fouten die kunnen optreden vanuit de widget.
  • Maak ten slotte een knop die, wanneer erop wordt geklikt, de uploadwidget zal aanroepen en openen.

Haal het meeste uit Cloudinary

Cloudinary biedt een gebruiksvriendelijke oplossing die het beheer van afbeeldingsbestanden en andere media-items vereenvoudigt.

Naast het bieden van een cloudopslagplatform, biedt Cloudinary ook functies zoals beeldtransformaties en beeldoptimalisatie. Dit zijn essentiële hulpmiddelen om de kwaliteit van uw media-items te verbeteren.