Express.js-ში სურათების ატვირთვა Multer-ით და Cloudinary-ით

სურათების ატვირთვა ვებ აპლიკაციებში ხშირი მოთხოვნაა. ამ ბლოგში განვიხილავთ, როგორ მოვახდინოთ სურათების ატვირთვა Express.js-ში:

1. მხოლოდ local ფოლდერში Multer-ით;

2. შემდეგ Cloudinary პლატფორმაზე ატვირთვა;

ასევე განვიხილავთ ორივე მეთოდის უპირატესობებსა და უარყოფით მხარეებს და დაგეხმარებით სწორი არჩევანის გაკეთებაში.

---

1. ლოკალურად ატვირთვა Multer-ის გამოყენებით

საჭირო პაკეტები:

bash
npm install express multer

ფოლდერის სტრუქტურა:

txt
project/
├── uploads/         # აქ ინახება სურათები
├── server.js

server.js ფაილი

js
const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs')
const app = express();

//ეს ბრძანება გახდის ლოკალურ ფაილებს წვდომადს, თითოეული ფოტოს სანახავად დაგჭირდებათ
//http://localhost:3000/fileId 
app.use(express.static('uploads'));

// ატვირთული ფაილების შენახვა uploads ფოლდერში
const storage = multer.diskStorage({
  destination: 'uploads',
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname));
  }
});

const upload = multer({ 
	storage,
	limits: { fileSize: 2 * 1024 * 1024 }  // 2MB
});

app.post('/upload', upload.single('image'), (req, res) => {
  res.json({ message: 'სურათი წარმატებით აიტვირთა ლოკალურად', file: req.file });
});

// ატვირთული ფოტოს წაშლა
app.delete('/delete/:filename', (req, res) => {
  const filePath = path.join(__dirname, 'uploads', req.params.filename);
  fs.unlink(filePath, (err) => {
    if (err) return res.status(404).json({ error: 'ფაილი არ მოიძებნა' });
    res.json({ message: 'სურათი წარმატებით წაიშალა' });
  });
});

app.listen(3000, () => console.log('სერვერი გაეშვა პორტზე 3000'));

უპირატესობები:

• არ გჭირდება გარე სერვისი;

• სწრაფი და მარტივი ლოკალური ტესტირებისთვის;

• კონტროლი შენახულ ფაილებზე.

უარყოფითი მხარეები:

• საჭიროებს დამატებით დაცვას (მაგ. გაფართოების ვალიდაცია);

• სერვერის გადატვირთვისას შესაძლოა დაკარგვა;

• ცუდი მასშტაბურობა — დისკზე შენახვა დიდი პროექტებისთვის არ არის ოპტიმალური;

---

2. Cloudinary-ის გამოყენება

საჭირო პაკეტები:

bash
npm install cloudinary multer multer-storage-cloudinary dotenv

.env ფაილი:

txt
CLOUDINARY_CLOUD_NAME=შენი_სახელი
CLOUDINARY_API_KEY=შენი_API_KEY
CLOUDINARY_API_SECRET=შენი_SECRET

server.js ფაილი Cloudinary-სთვის

js
require('dotenv').config();
const express = require('express');
const multer = require('multer');
const cloudinary = require('cloudinary').v2;
const { CloudinaryStorage } = require('multer-storage-cloudinary');

const app = express();

// Cloudinary კონფიგურაცია
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

const storage = new CloudinaryStorage({
  cloudinary,
  params: {
    folder: 'uploads',
    allowed_formats: ['jpg', 'png'],
  },
});

const upload = multer({ 
	storage,
	limits: { fileSize: 2 * 1024 * 1024 }  // 2MB
});

app.post('/upload', upload.single('image'), (req, res) => {
  res.json({ 
    message: 'სურათი წარმატებით აიტვირთა Cloudinary-ზე', 
    url: req.file.path,
    public_id: req.file.filename // public_id საჭიროა წაშლაში
  });
});

// Cloudinary-ზე ატვირთული სურათის წაშლა
app.delete('/delete/:public_id', async (req, res) => {
  try {
    const result = await cloudinary.uploader.destroy(req.params.public_id);
    if (result.result === 'ok') {
      res.json({ message: 'სურათი წარმატებით წაიშალა Cloudinary-დან' });
    } else {
      res.status(404).json({ error: 'სურათი ვერ მოიძებნა ან უკვე წაშლილია' });
    }
  } catch (err) {
    res.status(500).json({ error: 'დაფიქსირდა შეცდომა წაშლის დროს' });
  }
});

app.listen(3000, () => console.log('სერვერი გაეშვა პორტზე 3000'));

უპირატესობები:

• ავტომატური მასშტაბირება და CDN;

• არ იკავებს სერვერის სივრცეს;

• მარტივი ინტეგრაცია სხვადასხვა პლატფორმასთან;

• უზრუნველყოფს რეზერვს და დაცვას;

უარყოფითი მხარეები:

• საჭიროებს ინტერნეტკავშირს და Cloudinary ანგარიშს;

• აქვს ლიმიტები უფასო გეგმაზე;

• იდენტიფიკაციის მონაცემების დაცვა სავალდებულოა;

---

სურათის ატვირთვისა და წაშლის ფუნქციების ტესტირება

1. ტესტირება Postman-ით

ატვირთვა (POST /upload)

1. გახსენი Postman.
2. აირჩიე POST მეთოდი.
3. ჩაწერე URL:
   • ლოკალური: http://localhost:3000/upload
4. გადადი ტაბზე Body → form-data.
5. დაამატე შემდეგი ველი:
   • Key: image (ეს სახელი ზუსტად უნდა ემთხვეოდეს თქვენს backend კოდში upload.single('image')-ში გამოყენებულ სახელს).
   • აირჩიე Type: File.
   • Value: ატვირთე ნებისმიერი .jpg ან .png ფორმატის ფაილი.
6. გაუშვი request (დააჭირე ღილაკს Send).

მოსალოდნელი პასუხი: თქვენ უნდა მიიღოთ file ობიექტი, რომელშიც ასახული იქნება ატვირთული სურათის დეტალები ან Cloudinary-ის ბმული (თუ Cloudinary ინტეგრაცია გაქვთ).

წაშლა (DELETE)

• ლოკალური სერვერიდან წაშლა:

  • URL: http://localhost:3000/delete/<ფაილის_სახელი>
  • მაგალითად: http://localhost:3000/delete/1716100000000.jpg
    • <ფაილის_სახელი> უნდა ჩაანაცვლოთ იმ ფაილის სახელით, რომლის წაშლაც გსურთ (ეს სახელი, როგორც წესი, ატვირთვისას გიბრუნდებათ პასუხში).

• Cloudinary-დან წაშლა:

  • URL: http://localhost:3000/delete/<public_id>
  • მაგალითად: http://localhost:3000/delete/uploads/xyz123
  • ⚠️ მნიშვნელოვანია: Cloudinary-ის public_id არის მნიშვნელობა, რომელსაც იღებთ req.file.filename-დან სურათის ატვირთვისას. აუცილებელია, რომ ეს public_id შეინახოთ ატვირთვის პასუხიდან, რათა შეძლოთ მისი გამოყენება წაშლისას.

დასკვნა

თუ შენ ხარ საწყის ფაზაში ან უბრალოდ ტესტავ ფუნქციონალს, Multer ლოკალური შენახვით სრულიად საკმარისია. მაგრამ თუ გჭირდება მასშტაბური და სტაბილური გამოსახულების მენეჯმენტი — Cloudinary იდეალურია.