Nodejs: Sunucuya Dosya Y├╝klemek

Giri┼č

Hepinize Merhabalar­čĹő
Bu yaz─▒m─▒zda, nodejs altyap─▒l─▒ bir projemize nas─▒l g├Ârsel veya ba┼čka bir dosyay─▒ y├╝kleyip, sunucuda bir kopyas─▒n─▒ tutaca─č─▒m─▒z─▒ inceleye─čiz.

Bu i┼člemleri yaparken de dosya y├╝kleme i┼člemlerini kolayla┼čt─▒ran multer k├╝t├╝phanesinden yard─▒m alaca─č─▒z. Haz─▒rsan─▒z ba┼člayal─▒m.

Front-end'in yaz─▒lmas─▒

├ľncelikle HTML taraf─▒nda dosyay─▒ almak i├žin bir input ve sunucuya iste─či tetiklemek i├žin bir button ekleyelim;

<body>
    <input id="file" type="file" />
    <button id="upload">Submit</button>
</body>

┼×imdi de butona t─▒klad─▒ktan sonra ├žal─▒┼čacak kodlar─▒ yazal─▒m;

<script>
document.querySelector("#upload").addEventListener("click", async () => {
    const fileInput = document.querySelector("#file");
    const formData = new FormData();
    for (let i = 0; i < fileInput.files.length; i++) {
        const file = fileInput.files[i];
        formData.append("files", file);
    }
    let response = await fetch("/upload-file", {
        method: "POST",
        body: formData,
    });
    response = await response.json();
    console.log(response);
});
</script>

Back-end'in Yaz─▒lmas─▒

  • End-point'in Eklenmesi
    Projemize upload-file ad─▒nda, POST metoduna sahip bir route tan─▒mlayal─▒m.
router.post("/upload-file", (req, res, next) => {});

Gelen iste─če bir yan─▒t d├Ânelim ve front-end'de o istekten gelen yan─▒t─▒ kontrol edelim. B├Âylelikle butona t─▒klan─▒ld─▒─č─▒ zaman - dosya y├╝klenilmeden ├Ânce - her┼čeyin ├žal─▒┼čt─▒─č─▒na emin olaca─č─▒z.

router.post("/upload-file", (req, res, next) => {
  res.json({ message: "upload-file is triggered" });
});

Screenshot_366
┼×uana kadar her┼čey g├╝zel g├Âz├╝k├╝yor­čÄë
┼×imdi de projemize multeri entegre ederek, gelen datay─▒ bir klas├Âr├╝n i├žerisine kaydedelim.

  • Multer'in Projeye Dahil Edilmesi
npm i multer --save

komutunu kullanarak k├╝t├╝phaneyi, projemize indiriyoruz. Route'yi tan─▒mlad─▒─č─▒m─▒z dosyan─▒n en ├╝st├╝ne gidiyoruz ve multer konfig├╝rasyonlar─▒n─▒ yap─▒yoruz.

const multer = require("multer");

const storage = multer.diskStorage({
  destination:  (req, file, cb) =>{
    cb(null, "uploads");
  },
  filename:  (req, file, cb) =>{
    cb(null, file.originalname);
  },
});

const upload = multer({ storage }).array("files");

destination: Gelen dosyan─▒n y├╝klenece─či yolun yap─▒land─▒r─▒ld─▒─č─▒ fonksiyon.
filename: Gelen dosyan─▒n isminin yap─▒land─▒r─▒ld─▒─č─▒ fonksiyon.

Bunlar─▒ yapt─▒ktan sonra route'mizi a┼ča─č─▒daki ┼čekilde g├╝ncelliyoruz.

router.post("/upload-file", (req, res, next) => {
  console.log(req.files);
});

├ľrnek bir dosya y├╝kleyip gelen req.files objesine bakal─▒m.
Screenshot_367-1
storage k─▒sm─▒nda tan─▒mlad─▒─č─▒m─▒z filename fonksiyonu, yukar─▒da bulunan originalname k─▒sm─▒ndaki de─čeri alarak, kullan─▒c─▒n─▒n y├╝kledi─či dosya ismini sunucuya klonlanacak dosyan─▒n ismiyle e┼čitliyor ve b├Âylelikle uploads klas├Âr├╝ alt─▒nda kullan─▒c─▒n─▒n y├╝kledi─či dosya klonlanm─▒┼č oluyor.
┼×imdi de upload i┼člemini yapal─▒m ve hatalar─▒ yakalamak i├žinde try/catch kullanal─▒m.

router.post("/upload-file", (req, res, next) => {
  try {
    upload(req, res, (err) => {
      if (err) return res.json({ success: false, message: err.message });
      if (!req.files.length)
        return res.json({
          success: false,
          message: "L├╝tfen bir dosya se├žiniz.",
        });
      if (err) return res.json({ success: false, message: err.message });
      res.json({ success: true, message: "Dosya ba┼čar─▒yla y├╝klendi!" });
    });
  } catch (error) {
    res.json({ success: false, message: error.message });
  }
});
  • Gelen dosyay─▒ ko┼čulland─▒rma(sadece g├Ârsel vb.)
    Bunun i├žin ├╝stteki kodlarda biraz de─či┼čiklik yapmam─▒z gerekiyor.
    ├ľncelikle ko┼čul tan─▒mlayal─▒m;
const upload = multer({
  storage,
  fileFilter: (req, file, cb) => {
    if (
      file.mimetype == "image/png" ||
      file.mimetype == "image/jpg" ||
      file.mimetype == "image/jpeg"
    ) 
      cb(null, true);
    else {
      cb(null, false);
      return cb(new Error("L├╝tfen sadece foto─čraf y├╝kleyiniz!"));
    }
  },
}).array("files");

fileFilter fonksiyonunu kullanarak gelen dosyan─▒n tipine bakarak onu sunucuya y├╝kleme/y├╝klememe i┼člemi yapt─▒k.

Ve sonu├ž:
Screenshot_368

Ayr─▒ca dosya boyutlar─▒n─▒n istedi─činiz aral─▒kta olmas─▒ gibi di─čer t├╝m ko┼čullar i├žin a┼ča─č─▒da b─▒rakt─▒─č─▒m kaynak├ža k─▒sm─▒nda multer'in dok├╝mantasyonuna bakabilirsiniz.

Not1: Hata ├ž─▒kmamas─▒ i├žin projemizin k├Âk dizininde uploads ad─▒nda bir klas├Âr a├žmay─▒ unutmayal─▒m.
Not2: Ben projemi express-generator ile olu┼čturdu─čum i├žin t├╝m yap─▒ haz─▒r geldi. E─čer siz elle s─▒f─▒rdan yaz─▒yorsan─▒z body-parser k├╝t├╝phanesini eklemeyi unutmay─▒n.
Ve t├╝m i┼člemler bu kadar,
Okudu─čunuz i├žin te┼čekk├╝rler g├Âr├╝┼čmek dile─čiyle!­čÜÇ

Kaynak├ža & Kodlar

HTML KODLARI

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Deneme</title>
  </head>
  <body>
    <input id="file" type="file" />
    <button id="upload">Submit</button>
    <script>
      document.querySelector("#upload").addEventListener("click", async () => {
        const fileInput = document.querySelector("#file");
        const formData = new FormData();
        for (let i = 0; i < fileInput.files.length; i++) {
          const file = fileInput.files[i];
          formData.append("files", file);
        }
        let response = await fetch("/upload-file", {
          method: "POST",
          body: formData,
        });
        response = await response.json();
        console.log(response);
      });
    </script>
  </body>
</html>

SERVER KODLARI

const express = require("express");
const router = express.Router();
const multer = require("multer");

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads");
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  },
});

const upload = multer({
  storage,
  fileFilter: (req, file, cb) => {
    if (
      file.mimetype == "image/png" ||
      file.mimetype == "image/jpg" ||
      file.mimetype == "image/jpeg"
    )
      cb(null, true);
    else {
      cb(null, false);
      return cb(new Error("L├╝tfen sadece foto─čraf y├╝kleyiniz!"));
    }
  },
}).array("files");

router.post("/upload-file", (req, res, next) => {
  try {
    upload(req, res, (err) => {
      if (err) return res.json({ success: false, message: err.message });
      if (!req.files.length)
        return res.json({
          success: false,
          message: "L├╝tfen bir dosya se├žiniz.",
        });
      if (err) return res.json({ success: false, message: err.message });

      res.json({ success: true, message: "Dosya ba┼čar─▒yla y├╝klendi!" });
    });
  } catch (error) {
    res.json({ success: false, message: error.message });
  }
});

module.exports = router;
multer
Middleware for handling `multipart/form-data`.
Multer K├╝t├╝phanesi
Tolga ├ça─člayan

Tolga ├ça─člayan

En tehlikeli kelime nedir Olric? -AmaÔÇÖd─▒r efendim bana g├Âre. Neden Olric? -├ľnceden s├Âylenen her s├Âylemi veya kelimeyi ├Âld├╝r├╝r! Mesela, seni seviyorum ama. gibi.
Anonim