آپلود فایل در Node JS

در تقریبا تمام پروژه های نرم افزاری بی شک هر برنامه نویسی با مقوله آپلود فایل مواجه خواهد شد. در این آموزش به نحوه آپلود فایل در Node JS خواهیم پرداخت.

زبان برنامه نویسی Nodejs نیز مانند تمام زبانهای برنامه نویسی امکان آپلود و ذخیره سازی فایل را برای ما فراهم می کند.

ایجاد پروژه آپلود فایل در Node JS

قبل از هر چیز نیاز هست که اول پروژه Node JS را ایجاد کنیم. برای این کار مراحل زیر را انجام دهید و یا نحوه ایجاد پروژه Node JS با NPM را مطالعه نمایید.

دستور زیر را در Command یا ترمینال VSCode وارد نمایید.

npm init

سوالاتی در مورد پروژه از شما خواهد پرسید که می توانید با زدن اینتر از آنها صرف نظر کنید.

بعد از این کار فایلی با نام package.json ایجاد می شود که همان اطلاعات به صورت پیش فرض در آن قرار دارد که می توانید آنها را تغییر دهید.

حال، پروژه Node JS ایجاد شده است اما برای ادامه نیاز هست که تعدادی کتابخانه را نیز نصب نماییم که در ادامه به آنها خواهیم پرداخت.

راه اندازی پروژه

برای آپلود فایل نیاز هست که کتابخانه های express و multer نصب شود. بنابراین دستورات زیر را اجرا کنید.

npm i express

و سپس

npm i multer

در پوشه ریشه پروژه فایل App.js را ایجاد کنید. کدهای مربوط به پروژه در این فایل قرار خواهد گرفت.

پیاده سازی پروژه

اول از همه به سراغ موارد اجرای پروژه می رویم. فایل App.js را باز کرده و کدهای زیر را در آن نوشته و آن را ذخیره کنید.

const express = require("express");
const multer = require("multer");
const path = require("path");
const app = express();
const port = 8000;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}!`);
});

حال با استفاده از دستور زیر پروژه را اجرا کنید.

node App.js

اگر ایرادی در راه اندازی پروژه وجود نداشته باشد می توانید پیام Example app listening on port 8000 را مشاهده نمایید.

کلیدهای ترکیبی ctrl+c را فشار دهید تا اجرای پروژه متوقف شود.

در این پروژه دو root که یکی برای نمایش فرم آپلود فایل با متد get و دیگری برای دریافت و ذخیره سازی فایل در سرور با متد post خواهیم داشت.

app.get("/", (req, res) => {
  res.send(
    '<form method="POST" action="/upload-multiple-images" enctype="multipart/form-data"><div><label>Select multiple images:</label><input type="file" name="multiple_images" multiple /></div><div><input type="submit" name="btn_upload_multiple_images" value="Upload" /></div></form>'
  );
});

کد فوق برای نمایش فرم آپلود فایل می باشد.

app.post("/upload-multiple-images", (req, res) => {
  // ۱۰ is the limit I've defined for number of uploaded files at once
  // 'multiple_images' is the name of our file input field
  let upload = multer({
    storage: storage,
    fileFilter: imageFilter,
  }).array("multiple_images", 10);

  upload(req, res, function (err) {
    if (req.fileValidationError) {
      return res.send(req.fileValidationError);
    }
    // else if (...) // The same as when uploading single images

    let result = "You have uploaded these images: <hr />";
    const files = req.files;
    let index, len;

    // Loop through all the uploaded images and display them on frontend
    for (index = 0, len = files.length; index < len; ++index) {
      result += `<img src="${files[index].path}" width="300" style="margin-right: 20px;">`;
    }
    result += '<hr/><a href="./">Upload more images</a>';
    res.send(result);
  });
});

همان طور که گفته شد از کتابخانه multer برای آپلود استفاده شده است اما هنوز توابعی از آن پیاده سازی نشده است. در ادامه توابع مربوط به محل آپلود و نام فایل آپلودشده و فرمت فایلهای مجاز قرار داده می شود.

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

  // By default, multer removes file extensions so let's add them back
  filename: function (req, file, cb) {
    cb(
      null,
      file.fieldname + "-" + Date.now() + path.extname(file.originalname)
    );
  },
});

const imageFilter = function(req, file, cb) {
  // Accept images only
  if (!file.originalname.match(/\.(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF)$/)) {
      req.fileValidationError = 'Only image files are allowed!';
      return cb(new Error('Only image files are allowed!'), false);
  }
  cb(null, true);
};

به سرور اعلام می کنیم که فایلهای آپلود شده در پوشه uploads ذخیره خواهد شد.

حال برای اینکه بتوانیم فایلهای آپلود شده را نمایش دهیم نیاز هست که پوشه آن را با استفاده از کد زیر تعریف کنیم.

app.use(express.static(__dirname));

این کد در واقع به سرور اعلام می کند که کاربران می توانند محتوای مسیر تعریف شده را مشاهده نمایند.

کد کامل فایل App.js

در این پروژه ما فقط به آپلود تصاویر پرداخته ایم. شما می توانید با افزودن فرمت فایلها به قسمت imageFilter، فایلهای دیگر را نیز دریافت کنید.

const express = require("express");
const multer = require("multer");
const path = require("path");
const app = express();
const port = 8000;

app.use(express.static(__dirname));

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

  // By default, multer removes file extensions so let's add them back
  filename: function (req, file, cb) {
    cb(
      null,
      file.fieldname + "-" + Date.now() + path.extname(file.originalname)
    );
  },
});

const imageFilter = function(req, file, cb) {
  // Accept images only
  if (!file.originalname.match(/\.(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF)$/)) {
      req.fileValidationError = 'Only image files are allowed!';
      return cb(new Error('Only image files are allowed!'), false);
  }
  cb(null, true);
};

app.get("/", (req, res) => {
  res.send(
    '<form method="POST" action="/upload-multiple-images" enctype="multipart/form-data"><div><label>Select multiple images:</label><input type="file" name="multiple_images" multiple /></div><div><input type="submit" name="btn_upload_multiple_images" value="Upload" /></div></form>'
  );
});

app.post("/upload-multiple-images", (req, res) => {
  // ۱۰ is the limit I've defined for number of uploaded files at once
  // 'multiple_images' is the name of our file input field
  let upload = multer({
    storage: storage,
    fileFilter: imageFilter,
  }).array("multiple_images", 10);

  upload(req, res, function (err) {
    if (req.fileValidationError) {
      return res.send(req.fileValidationError);
    }
    // else if (...) // The same as when uploading single images

    let result = "You have uploaded these images: <hr />";
    const files = req.files;
    let index, len;

    // Loop through all the uploaded images and display them on frontend
    for (index = 0, len = files.length; index < len; ++index) {
      result += `<img src="${files[index].path}" width="300" style="margin-right: 20px;">`;
    }
    result += '<hr/><a href="./">Upload more images</a>';
    res.send(result);
  });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}!`);
});