Comment télécharger des images sur le cloud à l’aide de Node.js

Dans cet article, nous passerons en revue les étapes impliquées dans le téléchargement d’images dans le cloud à l’aide de Node.js, et nous utiliserons Cloudinary comme stockage dans le cloud.

Cet article passera en revue les étapes impliquées dans le téléchargement d’images sur le stockage en nuage avec Node.js, et le service de stockage en nuage que nous utiliserons est Cloudinary. Lorsqu’il s’agit de créer et de diffuser vos ressources numériques avec le moins d’effort possible,
Cloudinaire vous offre une solution de gestion de bout en bout.

Cet article suppose que vous connaissez les bases de JavaScript et de Node.js.

Conditions préalables

Pour suivre, je vous recommande d’avoir ce qui suit:

• Node version 10 ou plus récente
• Une compréhension de base de JavaScript et de Node.js
• Un environnement de développement intégré (par exemple, Visual Studio Code)

Configurez votre projet

Configurons notre environnement de développement. Ouvrez votre terminal et exécutez la commande suivante.

mkdir proEnv
cd proEnv
yarn init

Quelques questions vous seront posées et vos réponses seront utilisées pour générer votre fichier package.json.

Ensuite, nous devons installer Exprimer—un framework pour Node.js.

yarn add express

Créons un fichier nommé app.js à l’origine de notre projet qui servira de point d’entrée. Accédez à votre dossier parent et exécutez la commande ci-dessous.

touch app.js

Maintenant, ajoutez le code suivant dans le app.js dossier:

const express = require("express")
const app = express()
const port = 9000

app.use(express.json())

app.listen(port, () => {
  console.log(`Server is running on port:${port}`)
})

Exécutez la commande suivante dans votre terminal pour démarrer votre serveur :

node app.js

Vous devriez voir un message dans votre terminal indiquant « Le serveur s’exécute sur le port 9000 ». Pour automatiser les modifications de notre serveur, suivre les changements et redémarrer le serveur chaque fois qu’un changement se produit, nous devons installer Nodemon en tant que dépendance de développement.

yarn add -D nodemon

Pour que le package fonctionne comme prévu, ajoutons un script à notre package.json dossier.

"scripts": {
    "dev": "nodemon app.js",
    "start": "node app.js"
}

Ton package.json le fichier devrait ressembler à ceci :

{
  "name": "image-upload-api",
  "version": "1.0.0",
  "description": "Uploading Images to Cloudinary",
  "main": "app.js",
  "author": "Sproff",
  "license": "MIT",
  "scripts": {
    "dev": "nodemon app.js",
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

Gestionnaire d’erreurs

Créez un dossier à la racine de votre projet appelé utils. Dans le dossier, créez un fichier nommé errorHandler.js et y ajouter ce qui suit :

class ErrorHandler extends Error {
  constructor(statusCode, message) {
    super();
    this.statusCode = statusCode;
    this.message = message;
  }
}

module.exports = {
  ErrorHandler,
};

Nous avons créé un gestionnaire d’erreurs global pour éviter de dupliquer ou de réécrire les fonctions qui géreront les erreurs pouvant survenir lors du téléchargement d’une image ou du non-respect d’une étape requise. Il attribue un status Code et un message en fonction de la demande.

Configurer un fichier .env

Exiger dotenv dans ton app.js fichier en ajoutant ce qui suit :

require('dotenv').config()

Créez un fichier à la racine de votre projet nommé .env. Accédez à votre tableau de bord Cloudinary, puis copiez et collez votre Cloud name, API Key et API Secret.

CLOUDINARY_CLOUD_NAME=xxx
CLOUDINARY_API_KEY=xxx
CLOUDINARY_API_SECRET=xxx

Fonction de téléchargement d’images

A la racine de votre projet, créez un dossier appelé controller. Dans le dossier, créez un fichier nommé upload.controller.js et ajoutez-y le code suivant :

const { ErrorHandler } = require('../utils/errorHandler')

const uploadImage = async (req, res, next) => {
  try {
      res.json({
      status: 'success',
      message: 'Upload successful',
    })
  } catch (error) {
    next(new ErrorHandler(error.statusCode || 500, error.message))
  }
}

module.exports = {
  uploadImage,
}

Nous avons passé trois paramètres au uploadImage fonction. Il renvoie le résultat d’un téléchargement d’image réussi et gère les erreurs avec le gestionnaire d’erreurs que nous avons créé précédemment.

Ensuite, nous devons installer les packages suivants. Ouvrez votre terminal et exécutez la commande suivante :

yarn add multer cloudinary dotenv

La commande ci-dessus installera Müllerqui est un middleware utilisé pour gérer les requêtes avec multipart/form-data en-tête et Cloudinary. Les deux packages nous aideront à télécharger notre image efficacement. Nous avons également installé dotenvqui est un package npm que nous utiliserons pour garder nos configurations privées.

A la racine de votre projet, créez un dossier nommé service. Dans le dossier, créez un fichier nommé upload.service.js et y ajouter ce qui suit :

const multer = require("multer");
const cloudinary = require("cloudinary");
const { ErrorHandler } = require("../utils/errorHandler");

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

const memoryStorage = multer.memoryStorage();

const upload = multer({
  storage: memoryStorage,
});

const uploadToCloudinary = async (fileString, format) => {
  try {
    const { uploader } = cloudinary;

    const res = await uploader.upload(
      `data:image/${format};base64,${fileString}`
    );

    return res;
  } catch (error) {
    throw new ErrorHandler(500, error);
  }
};

module.exports = {
  upload,
  uploadToCloudinary,
};

Multer nous permet de transférer sans effort des fichiers d’un navigateur vers le serveur que nous désirons. Sans Multer, nous ne pourrons accéder à aucune donnée car le corps de la requête sera vide.

Dans le code ci-dessus, nous configurons Cloudinary avec nos informations d’identification stockées dans le .env dossier. La process.env propriété aura accès aux clés qui y sont définies. Nous créons une fonction appelée uploadToCloudinary qui accepte le tampon qui doit être traité avant de télécharger l’image sur Cloudinary. La upload La fonction sert de middleware qui sera appelée chaque fois que vous voudrez exécuter Multer, et elle renvoie des informations de base telles que le type de stockage. Dans notre cas, nous utilisons MemoryStorage.

Multer nous permet de stocker dynamiquement des fichiers de deux manières—DiskStorage et MemoryStorage. Nous utilisons MemoryStorage car c’est le type de stockage le plus courant, et il nous permet de communiquer avec notre serveur tout en gardant le tampon en mémoire pour une utilisation future.

Ensuite, nous devons installer un package qui nous permettra de convertir entre les formats – dans notre cas, tampon en URI de données. Ouvrez votre terminal et exécutez la commande suivante :

yarn add datauri

A l’intérieur de votre utils dossier, créez un fichier nommé file.js et y ajouter ce qui suit :

const DatauriParser = require('datauri/parser')

const parser = new DatauriParser()

const bufferToDataURI = (fileFormat, buffer) =>
  parser.format(fileFormat, buffer)

module.exports = {
  bufferToDataURI,
}

La DatauriParser fonction ici agit comme un passage de conversion de format de fichier. Nous avons un fichier appelé buffer qui doit être converti en URI de données avant de pouvoir être téléchargé sur Cloudinary car Cloudinary ne sait pas quoi
buffer est. L’analyseur recherchera le format de fichier .png ou .jpget convertissez le tampon en chaîne.

Remplacez maintenant le code que vous avez dans votre upload.controller.js fichier avec celui-ci mis à jour :

const { uploadToCloudinary } = require("../service/upload.service");
const { ErrorHandler } = require('../utils/errorHandler')
const { bufferToDataURI } = require('../utils/file')

const uploadImage = async (req, res, next) => {
  try {
    const { file } = req
    if (!file) throw new ErrorHandler(400, 'Image is required')

    const fileFormat = file.mimetype.split("https://www.telerik.com/")[1]
    const { base64 } = bufferToDataURI(fileFormat, file.buffer)

    const imageDetails = await uploadToCloudinary(base64, fileFormat)

    res.json({
      status: 'success',
      message: 'Upload successful',
      data: imageDetails,
    })
  } catch (error) {
    next(new ErrorHandler(error.statusCode || 500, error.message))
  }
}

module.exports = {
  uploadImage,
}

Nous importons le bufferToDataURI fonction dans le code ci-dessus et en sélectionnant le format de fichier que nous voulons accepter. Nous avons déstructuré le nom du fichier du corps de la requête et l’avons soumis à une simple vérification pour éviter les erreurs. On obtient le fileFormat à partir de l’objet fichier, divisez-le pour sélectionner un type spécifique et passez le tampon au bufferToDataURI fonction, qui renvoie un base64 chaîne de caractères.

uploadToCloudinary fonction ici accepte le fileFormat et le base64 chaîne de caractères. Après un téléchargement réussi, res fournit une réponse avec tous les détails de l’image.

Créer la route de téléchargement

Créons notre itinéraire. A la racine de votre projet, créez un dossier nommé routeset à l’intérieur, créez un fichier nommé upload.routes.js. Ajoutez ce qui suit au fichier :

const { Router } = require('express')
const { uploadImage } = require('../controller/upload.controller')
const { upload } = require('../service/upload.service')

const router = Router()

router.post("https://www.telerik.com/", upload.single('image'), uploadImage)

module.exports = router

Ici, nous avons déstructuré le routeur Express et l’avons affecté à une variable pour générer une requête de publication. Nous utilisons le middleware Multer, et upload.single télécharge simplement une seule image. Il existe d’autres méthodes pour télécharger des images, telles que upload.arrayqui peut télécharger plusieurs images.

Maintenant, importons notre route nouvellement créée dans notre app.js dossier.

const express = require("express");
require("dotenv").config();
const app = express();
const uploadRouter = require('./routes/upload.routes')
const port = process.env.PORT || 9000;

app.use(express.json());
app.use('/upload', uploadRouter)

app.listen(port, () => {
  console.log(`Server running on port: ${port}`);
});

Pour voir l’image que vous venez de télécharger, connectez-vous à votre compte Cloudinary et consultez votre médiathèque.

Conclusion

Cet article a couvert les étapes impliquées dans le téléchargement d’images directement sur Cloudinary à l’aide d’Express.js et de Multer. Nous avons vu à quel point il était facile d’intégrer Cloudinary à ces bibliothèques tierces.