I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Molte applicazioni dipendono dal Web per il loro contenuto. Ospitando le risorse immagine su una piattaforma cloud di terze parti, puoi assicurarti che le tue app possano accedervi in ​​modo rapido ed efficiente.

Inoltre, eviterai i costi di archiviazione e larghezza di banda che dovresti sostenere ospitando le risorse utilizzando server locali. Questo è il motivo per cui le soluzioni cloud di hosting di immagini come Cloudinary sono diventate sempre più popolari.

Segui per scoprire come utilizzare Cloudinary per ospitare le tue risorse immagine.

Che cos'è l'hosting di immagini e perché è importante?

L'hosting di immagini è un tipo di servizio di web hosting che ti consente di archiviare e accedere alle tue risorse di immagini o altri media digitali su una piattaforma cloud di terze parti.

Le risorse multimediali come le immagini sono essenziali per creare un'ottima esperienza utente per qualsiasi applicazione web. I servizi di hosting di immagini semplificano il caricamento, l'archiviazione, il recupero e la gestione delle risorse dal cloud, di conseguenza, migliorando le prestazioni della tua applicazione garantendo tempi di caricamento più rapidi e un'immagine migliore qualità.

instagram viewer

Cos'è Cloudinary?

Cloudinary è una piattaforma di gestione dei media basata su cloud. Fornisce funzionalità che semplificano il caricamento, l'archiviazione e la gestione di risorse multimediali digitali come immagini e video. In sostanza, Cloudinary semplifica la gestione di tutti i tuoi media digitali necessari per qualsiasi applicazione da un'unica piattaforma.

Imposta un progetto Cloudinary per ospitare file immagine

Per iniziare con il caricamento e l'hosting di file immagine, registrati a Nuvoloso account.

Accedi alla dashboard del tuo account e fai clic sulla scheda dell'icona delle impostazioni nel riquadro del menu a sinistra.

Nella pagina delle impostazioni, fare clic su Caricamento pulsante per aprire la pagina delle impostazioni di caricamento.

Ora, vai al Carica i preset sezione delle impostazioni e fare clic su Aggiungi preimpostazione di caricamento per creare un nuovo preset di caricamento per la tua applicazione.

Un preset di caricamento è una configurazione di parametri che definiscono la struttura predefinita di qualsiasi file multimediale caricato su Cloudinary. Ti consentono di definire una serie di regole da applicare ogni volta che carichi un file multimediale.

I parametri preimpostati assicurano che Cloudinary ottimizzi tutti i file multimediali per la consegna alla tua applicazione, migliorando le prestazioni e riducendo il tempo di caricamento.

Inserisci il nome del tuo preset e seleziona non firmato modalità dal menu a discesa visualizzato. Le modalità di firma consentono di specificare i metodi utilizzati da Cloudinary per autenticare e autorizzare eventuali caricamenti multimediali.

La selezione della modalità non firmata ti consentirà di effettuare caricamenti nel tuo archivio Cloudinary dalle tue applicazioni senza autenticarti con Cloudinary. In poche parole, questa modalità ti consente di selezionare un'immagine e caricarla direttamente dalla tua applicazione. Cloudinary lo consegnerà quindi su richiesta.

Dopo aver apportato tali modifiche, vai avanti e fai clic Salva per creare il preset di caricamento.

Crea un'applicazione Demo React

Puoi configurare una semplice applicazione React per gestire la funzionalità di caricamento utilizzando l'endpoint API Cloudinary e il widget di caricamento.

Per iniziare, creare un'applicazione React demo. Successivamente, esegui il comando seguente per avviare il server di sviluppo e passare a http://localhost: 3000 sul tuo browser per visualizzare i risultati.

inizio npm

Successivamente, esegui questo comando per installare Axios, una libreria JavaScript utilizzata per effettuare richieste HTTP dal browser.

npm installa axios

Carica file immagine utilizzando l'endpoint API Cloudinary

Dopo aver configurato l'app React, crea un componente di caricamento che effettua una richiesta POST all'endpoint API di Cloudinary per caricare i file di immagine sull'archivio cloud Cloudinary. Quindi destrutturerai la risposta API per visualizzare l'immagine caricata.

Crea un componente di caricamento

Nella directory /src, crea una nuova cartella e chiamala componenti. In questa cartella, crea un nuovo file, Upload.js.

Nel file Upload.js, aggiungi il codice seguente:

importare Reagisci, {useState} da'reagire';
importare Axios da"assio";
funzioneCaricamento() {
cost [uploadFile, setUploadFile] = useState("");
cost [cloudinaryImage, setCloudinaryImage] = useState("")


cost handleUpload = (e) => {
 e.preventDefault();
cost moduloDati = nuovo ModuloDati ();
 formData.append("file", caricare un file);
 formData.append("carica_preimpostazione", "il tuo nome preimpostato per il caricamento");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Cloudinary cloud nome/immagine/caricamento",
 formData
 )
 .Poi((risposta) => {
consolare.log (risposta);
 setCloudinaryImage (response.data.secure_url);
 })
 .presa((errore) => {
consolare.log (errore);
 });
 };
ritorno ( 
"App"> 
"lato sinistro"> 


 Carica immagini su Cloudinary Cloud Storage</h3>


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

Ecco cosa fa il codice di caricamento:

  • Dichiara due stati, caricare un file E cloudinaryImage. Li utilizza per archiviare il file caricato e l'immagine risultante da Cloudinary.
  • Il campo di input consente di selezionare un file immagine dal file system della macchina. Quando selezioni un file, aggiorna il valore della variabile uploadFile.
  • IL handleUpload La funzione utilizza Axios per effettuare una richiesta di post a Cloudinary. Passa nel file caricato e nel preset di caricamento che hai associato al tuo account cloud Cloudinary. Facendo clic sul pulsante di invio si chiama questa funzione.
  • Quando il codice riceve una risposta, memorizza il file secure_url dell'immagine Cloudinary in stato.
  • Infine, esegue il rendering di due sezioni, una per il caricamento del file e l'altra per la visualizzazione dell'immagine risultante.

Importa ed esegui il rendering del componente upload.js nel tuo file app.js. Dovresti vedere una risposta come questa nel tuo browser dopo aver selezionato e caricato il file immagine:

Vai al tuo account Cloudinary e fai clic su Libreria multimediale scheda per visualizzare il file caricato.

L'integrazione del widget Cloudinary nella tua applicazione React semplifica notevolmente il processo di caricamento. Inoltre, il widget ti consente di caricare file immagine da varie fonti, come Dropbox.

Per integrare il widget nella tua app React, per prima cosa devi includere la libreria JavaScript remota del widget nel tuo file index.html nella directory /public. Aggiungi il tag script qui sotto nella sezione head nel tuo file index.html.

<copionesrc=" https://upload-widget.cloudinary.com/global/all.js"
 type="testo/javascript">copione>

Successivamente, nel tuo file upload.js, aggiungi apportare le seguenti modifiche:

  • Importa quanto segue Reagisci ai ganci: useEffect e useRef. 
    importare {useState, useEffect, useRef} da'reagire';
  • Aggiungi il codice qui sotto: 
    cost cloudinaryRef = useRef();
    cost widgetRef = useRef();
     usaEffetto(() => {
     cloudinaryRef.current = finestra.nuvoloso;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     nuvolaNome: 'il tuo nome cloudinary cloud', 
     uploadPreset: 'il nome del preset di caricamento'
     }, (errore, risultato) => { 
    consolare.log (errore, risultato)
     });
     }, []);
    Il codice precedente crea un riferimento all'oggetto Cloudinary e al widget di caricamento utilizzando l'hook useRef. L'hook useEffect esegue il codice all'interno del callback una volta quando il componente viene montato. Quindi si inizializza il widget utilizzando il nome del cloud e si carica il nome predefinito e si registrano i risultati e gli errori che potrebbero verificarsi dal widget.
  • Infine, crea un pulsante che, una volta cliccato, invocherà e aprirà il widget di caricamento.

Ottenere il massimo da Cloudinary

Cloudinary fornisce una soluzione intuitiva che semplifica il processo di gestione dei file immagine e di altre risorse multimediali.

Oltre a fornire una piattaforma di archiviazione cloud, Cloudinary offre anche funzionalità come la trasformazione delle immagini e l'ottimizzazione delle immagini. Questi sono strumenti essenziali per migliorare la qualità delle tue risorse multimediali.