Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

De nombreuses applications dépendent du Web pour leur contenu. En hébergeant des ressources d'image sur une plate-forme cloud tierce, vous pouvez vous assurer que vos applications y ont accès rapidement et efficacement.

De plus, vous éviterez les coûts de stockage et de bande passante que vous encourriez en hébergeant les actifs à l'aide de serveurs sur site. C'est pourquoi les solutions cloud d'hébergement d'images comme Cloudinary sont devenues de plus en plus populaires.

Suivez-nous pour apprendre à utiliser Cloudinary pour héberger vos ressources d'image.

Qu'est-ce que l'hébergement d'images et pourquoi est-ce important?

L'hébergement d'images est un type de service d'hébergement Web qui vous permet de stocker et d'accéder à vos images ou à d'autres supports numériques sur une plate-forme cloud tierce.

Les ressources multimédias telles que les images sont essentielles pour créer une excellente expérience utilisateur pour toute application Web. Les services d'hébergement d'images vous permettent de télécharger, de stocker, de récupérer et de gérer facilement vos actifs à partir du cloud, par conséquent, améliorer les performances de votre application en garantissant des temps de chargement plus rapides et une meilleure image qualité.

instagram viewer

Qu'est-ce que le cloudinaire?

Cloudinary est une plateforme de gestion des médias basée sur le cloud. Il fournit des fonctionnalités qui vous permettent de télécharger, de stocker et de gérer facilement des ressources multimédias numériques telles que des images et des vidéos. Essentiellement, Cloudinary facilite la gestion de tous vos médias numériques nécessaires à n'importe quelle application à partir d'une seule plateforme.

Configurer un projet Cloudinary pour héberger des fichiers image

Pour commencer à télécharger et à héberger des fichiers image, inscrivez-vous à un Cloudinaire compte.

Connectez-vous au tableau de bord de votre compte et cliquez sur l'onglet de l'icône des paramètres dans le volet de menu de gauche.

Sur la page des paramètres, cliquez sur le Télécharger bouton pour ouvrir la page des paramètres de téléchargement.

Maintenant, dirigez-vous vers le Télécharger des préréglages section paramètres et cliquez sur Ajouter un préréglage de téléchargement pour créer un nouveau préréglage de téléchargement pour votre application.

Un préréglage de téléchargement est une configuration de paramètres qui définissent la structure par défaut de tout fichier multimédia que vous téléchargez sur Cloudinary. Ils vous permettent de définir un ensemble de règles à appliquer chaque fois que vous téléchargez un fichier multimédia.

Les paramètres prédéfinis garantissent que Cloudinary optimise tous les fichiers multimédias pour la livraison à votre application, améliorant les performances et réduisant le temps de chargement.

Remplissez le nom de votre préréglage et sélectionnez non signé mode dans le menu déroulant affiché. Les modes de signature vous permettent de spécifier les méthodes utilisées par Cloudinary pour authentifier et autoriser tout téléchargement de média.

La sélection du mode non signé vous permettra d'effectuer des téléchargements vers votre stockage Cloudinary à partir de vos applications sans vous authentifier auprès de Cloudinary. En termes simples, ce mode vous permet de sélectionner une image et de la télécharger directement depuis votre application. Cloudinary le livrera ensuite sur demande.

Après avoir apporté ces modifications, continuez et cliquez sur Sauvegarder pour créer le préréglage de téléchargement.

Créer une application démo React

Vous pouvez configurer une application React simple pour gérer la fonctionnalité de téléchargement à l'aide du point de terminaison de l'API Cloudinary et du widget de téléchargement.

Pour commencer, créer une démo React application. Ensuite, exécutez la commande ci-dessous pour lancer le serveur de développement et accédez à http://localhost: 3000 sur votre navigateur pour afficher les résultats.

début npm

Ensuite, exécutez cette commande pour installer Axios, une bibliothèque JavaScript utilisée pour effectuer des requêtes HTTP à partir du navigateur.

npm installer axios

Télécharger des fichiers image à l'aide du point de terminaison de l'API Cloudinary

Après avoir configuré l'application React, créez un composant de téléchargement qui envoie une requête POST au point de terminaison de l'API Cloudinary pour télécharger des fichiers image sur le stockage cloud Cloudinary. Vous déstructurerez ensuite la réponse de l'API pour afficher l'image téléchargée.

Créer un composant de téléchargement

Dans le répertoire /src, créez un nouveau dossier et nommez-le composants. Dans ce dossier, créez un nouveau fichier, Upload.js.

Dans le fichier Upload.js, ajoutez le code ci-dessous :

importer Réagissez, {useState} depuis'réagir';
importer Axios depuis"axios";
fonctionTélécharger() {
constante [uploadFile, setUploadFile] = useState("");
constante [cloudinaryImage, setCloudinaryImage] = useState("")


constante handleUpload = (e) => {
 e.preventDefault();
constante formData = nouveau Données de formulaire ();
 formData.append("déposer", téléverser un fichier);
 formData.append("upload_preset", "votre nom de préréglage de téléchargement");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Nom/image/téléchargement cloud du cloud",
 Données de formulaire
 )
 .alors((réponse) => {
console.log (réponse);
 setCloudinaryImage (response.data.secure_url);
 })
 .attraper((erreur) => {
console.log (erreur);
 });
 };
retour ( 
"Application"> 
"côté gauche"> 


 Télécharger des images sur Cloudinary Cloud Storage</h3>


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

Voici ce que fait le code de téléchargement :

  • Déclare deux états, téléverser un fichier et cloudinaryImage. Il les utilise pour stocker le fichier téléchargé et l'image résultante de Cloudinary.
  • Le champ de saisie vous permet de sélectionner un fichier image dans le système de fichiers de votre machine. Lorsque vous sélectionnez un fichier, il met à jour la valeur de la variable uploadFile.
  • Le poignéeTélécharger La fonction utilise Axios pour envoyer une demande de publication à Cloudinary. Il transmet le fichier téléchargé et le préréglage de téléchargement que vous avez associé à votre compte cloud Cloudinary. Cliquer sur le bouton Soumettre appelle cette fonction.
  • Lorsque le code reçoit une réponse, il stocke le secure_url de l'image Cloudinary en état.
  • Enfin, il rend deux sections, une pour télécharger le fichier et l'autre pour afficher l'image résultante.

Importez et affichez le composant upload.js dans votre fichier app.js. Vous devriez voir une réponse comme celle-ci dans votre navigateur une fois que vous avez sélectionné et téléchargé le fichier image :

Rendez-vous sur votre compte Cloudinary et cliquez sur le Médiathèque onglet pour afficher le fichier téléchargé.

L'intégration du widget Cloudinary dans votre application React simplifie considérablement le processus de téléchargement. De plus, le widget vous permet de télécharger des fichiers image à partir de diverses sources, telles que Dropbox.

Pour intégrer le widget dans votre application React, vous devez d'abord inclure la bibliothèque JavaScript distante du widget dans votre fichier index.html dans le répertoire / public. Ajoutez la balise de script ci-dessous dans la section head de votre fichier index.html.

<scénariosrc=" https://upload-widget.cloudinary.com/global/all.js"
 tapez="texte/javascript">scénario>

Ensuite, dans votre fichier upload.js, ajoutez les modifications suivantes :

  • Importez les éléments suivants Crochets de réaction: useEffect et useRef. 
    importer {useState, useEffect, useRef} depuis'réagir';
  • Ajoutez le code ci-dessous: 
    constante cloudinaryRef = useRef();
    constante widgetRef = useRef();
     useEffet(() => {
     cloudinaryRef.current = fenêtre.cloudinaire ;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     nom_nuage: 'votre nom de nuage nuageux', 
     uploadPreset & #160;: 'le nom du préréglage de téléchargement'
     }, (erreur, résultat) => { 
    console.log (erreur, résultat)
     });
     }, []);
    Le code ci-dessus crée une référence à l'objet Cloudinary et au widget de téléchargement à l'aide du crochet useRef. Le crochet useEffect exécute le code à l'intérieur du rappel une fois lorsque le composant est monté. Vous initialisez ensuite le widget à l'aide de votre nom de cloud et téléchargez le nom prédéfini et enregistrez les résultats et les erreurs pouvant survenir à partir du widget.
  • Enfin, créez un bouton qui, une fois cliqué, invoquera et ouvrira le widget de téléchargement.

Tirer le meilleur parti de Cloudinary

Cloudinary fournit une solution conviviale qui simplifie le processus de gestion des fichiers image et autres ressources multimédias.

En plus de fournir une plate-forme de stockage en nuage, Cloudinary propose également des fonctionnalités telles que les transformations d'images et l'optimisation des images. Ce sont des outils essentiels pour améliorer la qualité de vos actifs médias.