Cloudinary es una solución integral de administración de imágenes y videos para sitios web y aplicaciones móviles, que cubre todo, desde la carga de imágenes y videos, el almacenamiento, las manipulaciones y las optimizaciones hasta la entrega.
Instalación:
-
Paso 1: Vaya al directorio del proyecto e inicialice el proyecto usando el siguiente comando en la terminal.
npm init -y
-
Paso 2: instale los paquetes npm necesarios con el siguiente comando.
npm install express multer cloudinary
-
Paso 3: Cree 2 archivos en el directorio del proyecto actual llamado index.js y public/index.html como se muestra en el directorio del proyecto a continuación.
Estructura del proyecto:
index.html: Básicamente contiene 2 formularios, es decir, carga de archivos individuales y múltiples.
index.html
<!DOCTYPE html> <body style="padding: 30px;"> <form method="POST" action="/profile-upload-single" enctype="multipart/form-data"> <div> <label>Upload profile picture</label> <input type="file" name="profile-file" required/> </div> <div> <input type="submit" value="Upload" /> </div> </form> <br><hr><br> <form method="POST" action="/profile-upload-multiple" enctype="multipart/form-data"> <div> <label>Upload multiple profile picture</label> <input type="file" name="profile-files" required multiple /> </div> <div> <input type="submit" value="Upload" /> </div> </form> </body> </html>
index.js: reemplace cloud_name , api_key , api_secret con sus credenciales de cloudinary que puede encontrar en el panel de control de cloudinary .
index.js
// Requiring module
const express = require("express");
const multer = require("multer");
const port = 3000;
const app = express();
const cloudinary = require("cloudinary").v2;
const bodyParser = require("body-parser");
const fs = require("fs");
// Creating uploads folder if not already present
// In "uploads" folder we will temporarily upload
// image before uploading to cloudinary
if (!fs.existsSync("./uploads")) {
fs.mkdirSync("./uploads");
}
// Multer setup
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "./uploads");
},
filename: function (req, file, cb) {
cb(null, file.originalname);
},
});
var upload = multer({ storage: storage });
// Body parser configuration
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname + "/public"));
app.use("/uploads", express.static("uploads"));
// Cloudinary configuration
cloudinary.config({
cloud_name: "YOUR_CLOUD_NAME",
api_key: "YOUR_API_NAME",
api_secret: "YOUR_API_SECRET",
});
async function uploadToCloudinary(locaFilePath) {
// locaFilePath: path of image which was just
// uploaded to "uploads" folder
var mainFolderName = "main";
// filePathOnCloudinary: path of image we want
// to set when it is uploaded to cloudinary
var filePathOnCloudinary =
mainFolderName + "/" + locaFilePath;
return cloudinary.uploader
.upload(locaFilePath, { public_id: filePathOnCloudinary })
.then((result) => {
// Image has been successfully uploaded on
// cloudinary So we dont need local image
// file anymore
// Remove file from local uploads folder
fs.unlinkSync(locaFilePath);
return {
message: "Success",
url: result.url,
};
})
.catch((error) => {
// Remove file from local uploads folder
fs.unlinkSync(locaFilePath);
return { message: "Fail" };
});
}
function buildSuccessMsg(urlList) {
// Building success msg to display on screen
var response = `<h1>
<a href="/">Click to go to Home page</a><br>
</h1><hr>`;
// Iterating over urls of images and creating basic
// html to render images on screen
for (var i = 0; i < urlList.length; i++) {
response += "File uploaded successfully.<br><br>";
response += `FILE URL: <a href="${urlList[i]}">
${urlList[i]}</a>.<br><br>`;
response += `<img src="${urlList[i]}" /><br><hr>`;
}
response += `<br>
<p>Now you can store this url in database or
// do anything with it based on use case.</p>
`;
return response;
}
app.post(
"/profile-upload-single",
upload.single("profile-file"),
async (req, res, next) => {
// req.file is the `profile-file` file
// req.body will hold the text fields,
// if there were any
// req.file.path will have path of image
// stored in uploads folder
var locaFilePath = req.file.path;
// Upload the local image to Cloudinary
// and get image url as response
var result = await uploadToCloudinary(locaFilePath);
// Generate html to display images on web page.
var response = buildSuccessMsg([result.url]);
return res.send(response);
}
);
app.post(
"/profile-upload-multiple",
upload.array("profile-files", 12),
async (req, res, next) => {
// req.files is array of `profile-files` files
// req.body will contain the text fields,
// if there were any
var imageUrlList = [];
for (var i = 0; i < req.files.length; i++) {
var locaFilePath = req.files[i].path;
// Upload the local image to Cloudinary
// and get image url as response
var result = await uploadToCloudinary(locaFilePath);
imageUrlList.push(result.url);
}
var response = buildSuccessMsg(imageUrlList);
return res.send(response);
}
);
app.listen(port, () => {
console.log(`Server running on port ${port}!
\nClick http://localhost:3000/`);
});
Pasos para ejecutar el programa:
node index.js
Salida: abra el navegador y visite http://localhost:3000 . Ahora podría ver los siguientes 2 formularios, es decir, carga de imágenes únicas y múltiples, como se muestra a continuación.
Referencias: https://cloudinary.com/documentation/node_integration .
Publicación traducida automáticamente
Artículo escrito por RUGVEDBONGALE y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA