Node.js'de dosya yüklemelerini gerçekleştirmenin üç ana yolu vardır: görüntüleri doğrudan sunucunuza kaydetmek, veritabanınıza ikili veri veya base64 dizesi verileri ve verilerinizi kaydetmek ve yönetmek için Amazon Web Service (AWS) S3 gruplarını kullanma Görüntüler.

Burada, görüntüleri birkaç adımda Node.js uygulamalarında 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ı Kurma

Bu projede kullanılan kod bir GitHub deposu ve MIT lisansı altında ücretsiz olarak kullanabilirsiniz.

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

mkdir çoklu öğretici
CD çoklu eğitim

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

npm başlatma -y

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

  • İfade etmek: Express, bir Node.js çerçevesidir Bu, web ve mobil uygulamalar için sağlam bir dizi özellik sağlar. Node.js ile arka uç uygulamaları oluşturmayı kolaylaştırır.
    • instagram viewer
  • Multer: Multer, görüntülerin sunucunuza yüklenmesini ve kaydedilmesini basitleştiren hızlı bir ara katman yazılımıdır.

ile paketleri kurun düğüm paketi yöneticisi koşarak:

npm düzenlemek ekspres multer

Ardından, bir uygulama.js Dosyayı projenizin kök dizinine yerleştirin ve temel bir Express sunucusu oluşturmak için aşağıdaki kod bloğunu ekleyin:

//app.js
sabit ifade = gerekmek('ifade etmek');
sabit uygulama = ekspres();
sabit bağlantı noktası = işlem.env. LİMAN || 3000;
app.listen (bağlantı noktası, ()=>{
konsol.kayıt(`Uygulama bağlantı noktasını dinliyor ${bağlantı noktası}`);
});

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

İlk olarak, ithalat mırıldanmak senin içinde uygulama.js dosya.

sabit mırıldanmak = gerekmek("çoklayıcı");

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

A mırıldanmak depolama motoru çağrılarak oluşturulur disk kapasitesi içe aktarılan yöntem mırıldanmak modül. Bu yöntem bir döndürür Depolama Motoru dosyaları yerel dosya sisteminde depolamak için yapılandırılmış uygulama.

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

ikinci özellik, dosya adı, yüklenen dosyaların adlarını belirleyen bir işlevdir. Üç parametre alır: istek, dosyave bir geri arama (cb). istek Ekspres Rica etmek nesne, dosya 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, hata ve dosya adını bağımsız değişken olarak alır.

Aşağıdaki kod bloğunu uygulama.js bir depolama motoru oluşturmak için dosya:

//Depolama motoru ayarlanıyor
sabit storageEngine = multer.diskStorage({
 varış noktası: "./Görüntüler",
 dosya adı: (istek, dosya, cb) => {
 cb(hükümsüz, `${Tarih.Şimdi()}--${file.originalname}`);
 },
});

Yukarıdaki kod bloğunda, varış noktası mülkiyet”./Görüntüler”, böylece görüntüler projenizin dizininde bir dosyada saklanacaktır. Görüntüler dosya. Ardından, geri aramada geçtiniz hükümsüz hata olarak ve dosya adı olarak bir şablon dizesi. Şablon dizesi, çağrılarak oluşturulan bir zaman damgasından oluşur. Tarih.şimdi() görüntü adlarının her zaman benzersiz olmasını sağlamak için, dosya adını ve zaman damgasını ayırmak için iki tire ve dosyanın şu adresten erişilebilen orijinal adı: dosya nesne.

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

Ardından, başlatmanız gerekir mırıldanmak depolama motoru ile.

Aşağıdaki kod bloğunu uygulama.js depolama motoruyla multer'ı başlatmak için dosya:

//çoklayıcı başlatılıyor
sabit yükle = multer({
 depolama: depolama Motoru,
});

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

Yukarıdaki kod bloğunda, bir yapılandırma nesnesini iletirsiniz. depolamak özellik ayarlandı depolama motoru, daha önce oluşturduğunuz depolama motorudur.

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

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

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

Aşağıdaki kod bloğu ile multer yapılandırma nesnenizi güncelleyin:

sabit yükle = multer({
 depolama: depolama Motoru,
limitler: { Dosya boyutu: 1000000 },
});

Yukarıdaki kod bloğunda bir limitler özelliğini yapılandırma nesnesine ekleyin. Bu özellik, gelen veriler üzerinde çeşitli limitler belirleyen bir nesnedir. sen ayarla Dosya boyutu bayt cinsinden maksimum dosya boyutunun ayarlandığı özellik 10000001 MB'a eşdeğerdir.

Ekleyebileceğiniz başka bir doğrulama kuralı da dosya Filtresi özellik, hangi dosyaların karşıya yüklendiğini kontrol etmek için isteğe bağlı bir işlev. Bu işlev, işlenen her dosya için çağrılır. Bu fonksiyon ile aynı parametreleri alır. dosya adı işlev: istek, dosya, Ve cb.

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

Aşağıdaki kod bloğunu uygulama.js dosya filtreleme mantığını uygulamak için dosya:

sabit yol = gerekmek("yol");
sabit checkFileType = işlev (dosya, cb) {
//İzin verilen dosya uzantıları
sabit dosyaTürleri = /jpeg|jpg|png|gif|svg/;
 //kontrol etmek eklenti isimler
sabit extName = fileTypes.test (path.extname (file.originalname).toLowerCase());
sabit mimeType = fileTypes.test (file.mimetype);
 eğer (mimeType && hariciAdı) {
geri dönmek cb(hükümsüz, doğru);
 } başka {
 cb("Hata: Sadece Görselleri Yükleyebilirsiniz!!");
 }
};

bu kontrolDosyaTürü işlev iki parametre alır: dosya Ve cb.

Yukarıdaki kod bloğunda, bir dosyaTürleri izin verilen resim dosyası uzantılarıyla bir normal ifade ifadesini depolayan değişken. Sonra, aradınız Ölçek regex ifadesinde yöntem.

bu Ölçek yöntem, iletilen dizede bir eşleşme olup olmadığını kontrol eder ve döndürür doğru veya YANLIŞ bir eşleşme bulup bulmadığına bağlı olarak. Ardından, üzerinden erişebileceğiniz yüklenen dosya adını iletirsiniz. dosya.özgünadı, yolun modülüne harici isim dize yolunun uzantısını kendisine döndüren yöntem. Son olarak, JavaScript'i zincirlersiniz küçük harf uzantı adları büyük harfli görüntüleri işlemek için ifadeye dize işlevi.

Uzantı adları kolayca düzenlenebildiğinden yalnızca uzantı adını kontrol etmek yeterli değildir. Yalnızca resimlerin yüklendiğinden emin olmak için, MIME türü fazla. bir dosyaya erişebilirsiniz mimetip aracılığıyla mülkiyet dosya.mime türü. Yani, mimetip özelliğini kullanan Ölçek Uzantı adları için yaptığınız gibi bir yöntem.

İki koşul true olarak dönerse, geri aramayı şu şekilde döndürürsünüz: hükümsüz ve true, yoksa geri aramayı bir hatayla döndürürsünüz.

Son olarak, dosya Filtresi özelliğini multer yapılandırmanıza göre değiştirin.

sabit yükle = multer({
 depolama: depolama Motoru,
limitler: { Dosya boyutu: 10000000 },
 fileFilter: (req, file, cb) => {
 checkFileType (dosya, cb);
 },
});

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

Ardından, görüntü yüklemelerini işleyecek rota işleyicilerini uygulamanız gerekir.

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

Aşağıdaki kod bloğunu uygulama.js tek görüntü yüklemeleri için bir yol işleyicisi oluşturmak için dosya:

uygulama.post("/single", yükle.single("görüntü"), (gerekli, res) => {
eğer (istek.dosya) {
 res.gönder("Tek dosya başarıyla yüklendi");
 } başka {
 res.status (400).send("Lütfen geçerli bir resim yükleyin");
 }
});

Yukarıdaki kod bloğunda, Bekar yöntemi yüklemek multer konfigürasyonunuzu saklayan değişken. Bu yöntem, verilen form alanıyla ilişkili "tek bir dosyayı" işleyen bir ara katman yazılımı döndürür. Sonra geçtin görüntü form alanı olarak.

Son olarak, bir dosyanın şu adresten yüklenip yüklenmediğini kontrol edin: istek içindeki nesne dosya mülk. Eğer öyleyse, bir başarı mesajı gönderirsiniz, aksi takdirde bir hata mesajı gönderirsiniz.

Aşağıdaki kod bloğunu uygulama.js birden çok görüntü yüklemesi için bir yol işleyicisi oluşturmak üzere dosya:

uygulama.post("/multiple", yükle.dizi("Görüntüler", 5), (gerekli, res) => {
eğer (istek.Dosyalar) {
 res.gönder("Birden çok dosya başarıyla yüklendi");
 } başka {
 res.status (400).send("Lütfen geçerli bir resim yükleyin");
 }
});

Yukarıdaki kod bloğunda, sıralamak yöntemi yüklemek multer konfigürasyonunuzu saklayan değişken. Bu yöntem, bir alan adı ve 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. Sonra geçtin Görüntüler paylaşılan form alanı olarak ve bir kerede yüklenebilecek maksimum resim sayısı olarak 5.

Multer Kullanmanın Avantajları

Node.js uygulamalarınızda Multer'ı kullanmak, normalde karmaşık olan görüntüleri doğrudan sunucunuza yükleme ve kaydetme sürecini 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 bu da onu form verilerini ayrıştırmak için çok verimli hale getirir.