Skip to content

Latest commit

 

History

History
 
 

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

README.md

Görsel Yüklemek

Şimdiye kadar fotoğraların yalnızca ismini va açıklamalarını gönderdik, bu çalışma da ise fotoğrafın kendisini nasıl göndereceğimiz üzerine konuşacağız. Bunun için express-fileupload modülünü kullanacağız. Bu modülü indirelim.

npm i express-fileupload

Görseli göndermek için formumuzda ilgili input alanının, name="image" ve type="file" olduğuna dikkat ediniz. Ayrıca görsel göndermemiz için encType="multipart/form-data" eklememiz gerekir. Bundan sonra express-fileupload modülün de yardımıyla bundan sonra req.files.image nesnesi yardımıyla gönderilen görsel özelliklerine ulaşabiliriz. express-fileupload modülünü kullanmak için aşağıdaki işlemleri yapacağız.

const fileUpload = require('express-fileupload'); // modülü kullanıma alıyoruz.
app.use(fileUpload());                            // middleware olarak kaydediyoruz.

Görsel Yükleme Aşamaları

  • Biz görselleri uploads isimli bir klasöre yükleyeceğiz, öncelikle bu klasörün olup olmadığını kontrol edeceğiz.
  const uploadDir = 'public/uploads';

  if (!fs.existsSync(uploadDir)) { // Bunun için const fs = require('fs'); almamız gerekir.
    fs.mkdirSync(uploadDir);
  }
  • Sonra bu görselimizin kendisini ve yüklenmek istenen dosya yolunu yakalayalım.
  let uploadeImage = req.files.image;
  let uploadPath = __dirname + '/public/uploads/' + uploadeImage.name;
  • Son olarak da bu bilgileri görsele ait diğer bilgiler ile birlikte veritabanına yazdıralım.
  uploadeImage.mv(uploadPath, async () => {
    await Photo.create({
      ...req.body,
      image: '/uploads/' + uploadeImage.name,
    });

ilgili yönlendirmenin son hali aşağıdadır:

app.post('/photos', async (req, res) => {
  await Photo.create(req.body)
  res.redirect('/')
});

  const uploadDir = 'public/uploads';

  if (!fs.existsSync(uploadDir)) {
    fs.mkdirSync(uploadDir);
  }

  let uploadeImage = req.files.image;
  let uploadPath = __dirname + '/public/uploads/' + uploadeImage.name;

  uploadeImage.mv(uploadPath, async () => {
    await Photo.create({
      ...req.body,
      image: '/uploads/' + uploadeImage.name,
    });
    res.redirect('/');
  });
});