Node.js kullanarak resim yüklemek karmaşık görünebilir. Multer paketi, Node.js’de dosya yüklemelerini yönetmeyi kolaylaştırır.

Node.js’de dosya yüklemelerini işlemenin üç ana yolu vardır: görüntüleri doğrudan sunucunuza kaydetmek, görüntünün ikili verilerini veya base64 dize verilerini veritabanınıza kaydetmek ve verilerinizi kaydetmek ve yönetmek için Amazon Web Service (AWS) S3 klasörlerini kullanmak. Görüntüler.

Burada, birkaç adımda Node.js uygulamalarında görüntüleri doğrudan sunucunuza yüklemek ve kaydetmek için bir Node.js ara yazılımı olan Multer’ı nasıl kullanacağınızı öğreneceksiniz.

1. Adım: Geliştirme Ortamını Ayarlama

Bu projede kullanılan kod bir GitHub deposunda mevcuttur ve MIT lisansı altında kullanmanız için ücretsizdir.

İlk önce bir proje klasörü oluşturun ve aşağıdaki komutu çalıştırarak içine taşıyın:

mkdir multer-tutorial

cd multer-tutorial

Ardından, aşağıdakileri çalıştırarak proje dizininizde npm’yi başlatın:

npm init -y

Ardından, bazı bağımlılıklar yüklemeniz gerekecek. Bu öğretici için gereken bağımlılıklar şunları içerir:

Express : Express, web ve mobil uygulamalar için sağlam bir dizi özellik sağlayan bir Node.js çerçevesidir . Node.js ile arka uç uygulamaları oluşturmayı kolaylaştırır.

Multer : Multer, görüntüleri sunucunuza yüklemeyi ve kaydetmeyi basitleştiren hızlı bir ara katman yazılımıdır.

Paketleri düğüm paketi yöneticisi ile aşağıdakileri çalıştırarak kurun :

npm install express multer

Ardından, projenizin kök dizininde bir app.js dosyası oluşturun ve temel bir Express sunucusu oluşturmak için aşağıdaki kod bloğunu ekleyin:

//app.js

const express = require(‘express’);

const app = express();

const port = process.env.PORT || 3000;

app.listen(port, ()=>{

    console.log(`App is listening on port ${port}`);

});

2. Adım: Multer’ı Yapılandırma

İlk olarak, multer’ı app.js dosyanıza alın .

const multer = require(“multer”);

multer , yüklenen dosyaların saklanacağı dizin ve dosyaların nasıl adlandırılacağı hakkında bilgi içeren bir depolama motoru gerektirir.

İçe aktarılan multer modülünde diskStorage yöntemi çağrılarak bir multer depolama motoru oluşturulur . Bu yöntem, dosyaları yerel dosya sisteminde depolamak için yapılandırılmış bir StorageEngine uygulaması döndürür.

İki özelliğe sahip bir yapılandırma nesnesi alır: hedef , yüklenen görüntülerin nerede saklanacağını belirten bir dize veya işlevdir.

İkinci özellik olan filename yüklenen dosyaların adlarını belirleyen bir işlevdir. Üç parametre alır: req , file ve bir geri arama ( cb ). req , Express Request nesnesidir, file , işlenen dosya hakkında bilgi içeren bir nesnedir ve cb , yüklenen dosyaların adlarını belirleyen bir geri aramadır. Geri arama işlevi, argüman olarak hatayı ve dosya adını alır.

Bir depolama motoru oluşturmak için aşağıdaki kod bloğunu app.js dosyanıza ekleyin:

//Setting storage engine

const storageEngine = multer.diskStorage({

  destination: “./images”,

  filename: (req, file, cb) => {

    cb(null, `${Date.now()}–${file.originalname}`);

  },

});

Yukarıdaki kod bloğunda, target özelliğini ” ./images ” olarak ayarladınız, böylece görüntüler projenizin dizininde bir görüntüler klasöründe saklanacaktır . Ardından, geri aramada, hata olarak null değerini ve dosya adı olarak bir şablon dizesini geçtiniz . Şablon dizesi, görüntü adlarının her zaman benzersiz olmasını sağlamak için Date.now() çağrılarak oluşturulan bir zaman damgasından, dosya adını ve zaman damgasını ayırmak için iki kısa çizgiden ve dosya nesnesinden erişilebilen dosyanın orijinal adından oluşur .

Bu şablondan elde edilen dizeler şöyle görünecektir: 1663080276614–example.jpg .

Ardından, depolama motoruyla multer’ı başlatmanız gerekir.

Multer’ı depolama motoruyla başlatmak için aşağıdaki kod bloğunu app.js dosyanıza ekleyin:

//initializing multer

const upload = multer({

  storage: storageEngine,

});

multer, çok parçalı/form-veri biçiminde yüklenen dosyaları işleyen ara katman yazılımı oluşturmak için çeşitli yöntemler sağlayan bir Multer örneği döndürür .

Yukarıdaki kod bloğunda, daha önce oluşturduğunuz depolama motoru olan storageEngine olarak ayarlanmış bir depolama özelliğine sahip bir yapılandırma nesnesi iletirsiniz.

Şu anda Multer yapılandırmanız tamamlandı, ancak sunucunuza yalnızca görüntülerin kaydedilmesini sağlayan hiçbir doğrulama kuralı yok.

3. Adım: Görüntü Doğrulama Kuralları Ekleme

Ekleyebileceğiniz ilk doğrulama kuralı, bir resmin uygulamanıza yüklenmesine izin verilen maksimum boyuttur.

Multer yapılandırma nesnenizi aşağıdaki kod bloğuyla güncelleyin:

const upload = multer({

  storage: storageEngine,

  limits: { fileSize: 1000000 },

});

Yukarıdaki kod bloğunda , yapılandırma nesnesine bir limit özelliği eklediniz. Bu özellik, gelen veriler üzerinde çeşitli limitler belirleyen bir nesnedir. Bayt cinsinden maksimum dosya boyutunun 1MB’ye eşdeğer olan 1000000 olarak ayarlandığı fileSize özelliğini ayarlarsınız.

Ekleyebileceğiniz başka bir doğrulama kuralı, hangi dosyaların yükleneceğini denetlemek için isteğe bağlı bir işlev olan fileFilter özelliğidir. Bu işlev, işlenen her dosya için çağrılır. Bu işlev, dosya adı işleviyle aynı parametreleri alır : req , file ve cb .

Kodunuzu daha temiz ve yeniden kullanılabilir hale getirmek için tüm filtreleme mantığını bir işleve soyutlayacaksınız.

Dosya filtreleme mantığını uygulamak için aşağıdaki kod bloğunu app.js dosyanıza ekleyin:

const path = require(“path”);

const checkFileType = function (file, cb) {

  //Allowed file extensions

  const fileTypes = /jpeg|jpg|png|gif|svg/;

  //check extension names

  const extName = fileTypes.test(path.extname(file.originalname).toLowerCase());

  const mimeType = fileTypes.test(file.mimetype);

  if (mimeType && extName) {

    return cb(null, true);

  } else {

    cb(“Error: You can Only Upload Images!!”);

  }

};

checkFileType işlevi iki parametre alır : file ve cb .

Yukarıdaki kod bloğunda , izin verilen resim dosyası uzantılarıyla bir regex ifadesini saklayan bir fileTypes değişkeni tanımladınız. Ardından, normal ifade ifadesinde test yöntemini çağırdınız .

Test yöntemi, iletilen dizede bir eşleşme olup olmadığını kontrol eder ve bir eşleşme bulup bulmadığına bağlı olarak doğru veya yanlış döndürür. Ardından, file.originalname aracılığıyla erişebileceğiniz yüklenen dosya adını, yolun dize yolunun uzantısını döndüren modülün extname yöntemine iletirsiniz. Son olarak, uzantı adları büyük olan görüntüleri işlemek için JavaScript toLowerCase dize işlevini ifadeye zincirlersiniz .

Uzantı adları kolayca düzenlenebildiğinden, yalnızca uzantı adını kontrol etmek yeterli değildir. Yalnızca görüntülerin yüklendiğinden emin olmak için MIME türünü de kontrol etmeniz gerekir. Bir dosyanın mimetype özelliğine file.mimetype aracılığıyla erişebilirsiniz . Böylece, uzantı adları için yaptığınız gibi test yöntemini kullanarak mimetype özelliğini kontrol edersiniz.

İki koşul true değerini döndürürse, geri aramayı null ve true ile döndürürsünüz veya geri aramayı bir hatayla döndürürsünüz.

Son olarak, multer yapılandırmanıza fileFilter özelliğini eklersiniz.

const upload = multer({

  storage: storageEngine,

  limits: { fileSize: 10000000 },

  fileFilter: (req, file, cb) => {

    checkFileType(file, cb);

  },

});

Adım 4: Multer’ı Ekspres Ara Yazılım Olarak Kullanma

Ardından, resim yüklemelerini işleyecek rota işleyicileri uygulamanız gerekir.

Multer, yapılandırmaya bağlı olarak hem tekli hem de çoklu görüntü yüklemelerini gerçekleştirebilir.

Tek resim yüklemeleri için bir rota işleyici oluşturmak için aşağıdaki kod bloğunu app.js dosyanıza ekleyin:

app.post(“/single”, upload.single(“image”), (req, res) => {

  if (req.file) {

    res.send(“Single file uploaded successfully”);

  } else {

    res.status(400).send(“Please upload a valid image”);

  }

});

Yukarıdaki kod bloğunda, multer yapılandırmanızı depolayan yükleme değişkenindeki tekli yöntemi çağırdınız. Bu yöntem, verilen form alanıyla ilişkili “tek bir dosyayı” işleyen bir ara katman yazılımı döndürür. Ardından görüntüyü form alanı olarak geçtiniz .

Son olarak, file özelliğindeki req nesnesi aracılığıyla bir dosyanın yüklenip yüklenmediğini kontrol edin. Eğer öyleyse, bir başarı mesajı gönderirsiniz, yoksa bir hata mesajı gönderirsiniz.

Birden çok resim yüklemesi için bir rota işleyici oluşturmak için aşağıdaki kod bloğunu app.js dosyanıza ekleyin:

app.post(“/multiple”, upload.array(“images”, 5), (req, res) => {

  if (req.files) {

    res.send(“Muliple files uploaded successfully”);

  } else {

    res.status(400).send(“Please upload a valid images”);

  }

});

Yukarıdaki kod bloğunda, multer yapılandırmanızı depolayan yükleme değişkenindeki dizi yöntemini çağırdınız. Bu yöntem, bir alan adı ve bir maksimum sayı olmak üzere iki bağımsız değişken alır ve aynı alan adını paylaşan birden çok dosyayı işleyen ara yazılımı döndürür. Ardından, paylaşılan form alanı olarak görüntüleri ve aynı anda yüklenebilecek maksimum görüntü sayısı olarak 5’i geçtiniz .

Multer Kullanmanın Avantajları

Node.js uygulamalarınızda Multer’ı kullanmak, görüntüleri doğrudan sunucunuza yükleme ve kaydetme gibi karmaşık işlemleri basitleştirir. Multer ayrıca gelen form verilerini ayrıştırmak için bir Node.js modülü olan busboy’u temel alır ve form verilerini ayrıştırmak için çok verimli hale getirir.