نحوه آپلود تصاویر در Node.js با استفاده از مولتر

آپلود تصاویر با استفاده از Node.js ممکن است پیچیده به نظر برسد. بسته multer مدیریت آپلود فایل در Node.js را آسان می کند.

سه راه اصلی برای مدیریت آپلود فایل در Node.js وجود دارد: ذخیره تصاویر به طور مستقیم در سرور، ذخیره داده های باینری تصویر یا داده های رشته base64 در پایگاه داده شما، و استفاده از سطل های S3 وب سرویس آمازون (AWS) برای ذخیره و مدیریت خود تصاویر.

در اینجا یاد خواهید گرفت که چگونه از Multer، یک میان افزار Node.js، برای آپلود و ذخیره تصاویر مستقیماً در سرور خود در برنامه های Node.js در چند مرحله استفاده کنید.

مرحله 1: تنظیم محیط توسعه

کد مورد استفاده در این پروژه در a موجود است
مخزن GitHub
و استفاده از آن تحت مجوز MIT برای شما رایگان است.

ابتدا یک پوشه پروژه ایجاد کنید و با اجرای دستور زیر وارد آن شوید:

mkdir multer-tutorial
cd multer-tutorial

سپس، npm را در فهرست پروژه خود با اجرای:

npm init -y

در مرحله بعد، باید برخی از وابستگی ها را نصب کنید. وابستگی های مورد نیاز برای این آموزش عبارتند از:

• Express: Express یک چارچوب Node.js است که مجموعه ای قوی از ویژگی ها را برای برنامه های کاربردی وب و موبایل ارائه می دهد. ساخت اپلیکیشن های بک اند با Node.js را آسان تر می کند.
• Multer: مولتر یک میان افزار اکسپرس است که آپلود و ذخیره تصاویر در سرور شما را ساده می کند.

بسته ها را با مدیر بسته گره با اجرای:

npm install express multer

در مرحله بعد، یک فایل app.js در دایرکتوری ریشه پروژه خود ایجاد کنید و بلوک کد زیر را برای ایجاد یک سرور اصلی Express اضافه کنید:

//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: پیکربندی مولتر

ابتدا multer را در فایل app.js خود وارد کنید.

const multer = require("multer");

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

یک موتور ذخیره سازی مولتر با فراخوانی متد diskStorage در ماژول مولتر وارد شده ایجاد می شود. این روش یک پیاده سازی StorageEngine را برمی گرداند که برای ذخیره فایل ها در سیستم فایل محلی پیکربندی شده است.

یک شی پیکربندی با دو ویژگی می گیرد: مقصد، که رشته یا تابعی است که مشخص می کند تصاویر آپلود شده کجا ذخیره شوند.

ویژگی دوم، filename، تابعی است که نام فایل های آپلود شده را تعیین می کند. به سه پارامتر req، file و callback (cb) نیاز دارد. req شی درخواست Express است، فایل یک شی حاوی اطلاعات مربوط به فایل پردازش شده است، و cb یک callback است که نام فایل های آپلود شده را تعیین می کند. تابع callback خطا و نام فایل را به عنوان آرگومان می گیرد.

بلوک کد زیر را به فایل app.js خود اضافه کنید تا یک موتور ذخیره سازی ایجاد کنید:

//Setting storage engine
const storageEngine = multer.diskStorage({
  destination: "./images",
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}--${file.originalname}`);
  },
});

در بلوک کد بالا، ویژگی مقصد را روی “/images” تنظیم می‌کنید، بنابراین، تصاویر در فهرست پروژه شما در پوشه تصاویر ذخیره می‌شوند. سپس در callback، null را به عنوان خطا و یک رشته الگو را به عنوان نام فایل ارسال کردید. رشته الگو شامل یک مهر زمانی است که با فراخوانی Date.now() ایجاد می شود تا اطمینان حاصل شود که نام تصویر همیشه منحصر به فرد است، دو خط فاصله برای جدا کردن نام فایل و مهر زمان، و نام اصلی فایل، که می تواند از شی فایل قابل دسترسی باشد.

رشته های به دست آمده از این الگو به شکل زیر خواهد بود: 1663080276614–example.jpg.

بعد، باید multer را با موتور ذخیره سازی مقداردهی اولیه کنید.

بلوک کد زیر را به فایل app.js خود اضافه کنید تا multer با موتور ذخیره سازی مقداردهی اولیه شود:

//initializing multer
const upload = multer({
  storage: storageEngine,
});

multer یک نمونه مولتر را برمی‌گرداند که چندین روش برای تولید میان‌افزار فراهم می‌کند که فایل‌های آپلود شده را در قالب چندبخشی/فرم-داده پردازش می‌کند.

در بلوک کد بالا، یک شیء پیکربندی را با ویژگی ذخیره‌سازی تنظیم شده به storageEngine، که موتور ذخیره‌سازی است که قبلاً ایجاد کرده‌اید، ارسال می‌کنید.

در حال حاضر، پیکربندی Multer شما کامل شده است، اما هیچ قانون اعتبارسنجی وجود ندارد که تضمین کند فقط تصاویر می توانند در سرور شما ذخیره شوند.

مرحله 3: افزودن قوانین اعتبارسنجی تصویر

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

شی پیکربندی multer خود را با بلوک کد زیر به روز کنید:

const upload = multer({
  storage: storageEngine,
  limits: { fileSize: 1000000 },
});

در بلوک کد بالا، یک ویژگی limits به شی پیکربندی اضافه کردید. این ویژگی یک شی است که محدودیت های مختلفی را برای داده های ورودی مشخص می کند. شما ویژگی fileSize را تنظیم می کنید که با آن حداکثر اندازه فایل بر حسب بایت برابر با 1000000 است که معادل 1 مگابایت است.

یکی دیگر از قوانین اعتبارسنجی که می‌توانید اضافه کنید، ویژگی fileFilter است، یک تابع اختیاری برای کنترل فایل‌هایی که آپلود می‌شوند. این تابع برای هر فایلی که پردازش می شود فراخوانی می شود. این تابع همان پارامترهای تابع نام فایل را می گیرد: req، file و cb.

برای اینکه کد خود را پاک‌تر و قابل استفاده‌تر کنید، تمام منطق فیلتر را در یک تابع انتزاع می‌کنید.

بلوک کد زیر را به فایل app.js خود اضافه کنید تا منطق فیلتر کردن فایل را پیاده سازی کنید:

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 دو پارامتر دارد: file و cb.

در بلوک کد بالا، یک متغیر fileTypes تعریف کردید که یک عبارت regex را با پسوندهای مجاز فایل تصویر ذخیره می کند. در مرحله بعد، روش تست را روی عبارت regex فراخوانی کردید.

روش تست یک مطابقت را در رشته پاس شده بررسی می کند و بسته به اینکه مطابقت پیدا کند، true یا false را برمی گرداند. سپس، نام فایل آپلود شده را که می‌توانید از طریق file.originalname به آن دسترسی داشته باشید، به متد extname ماژول مسیر می‌دهید، که پسوند مسیر رشته را به آن برمی‌گرداند. در نهایت، تابع رشته جاوا اسکریپت را به حالت LowerCase به عبارتی زنجیره می زنید تا تصاویر را با نام پسوند آن ها با حروف بزرگ مدیریت کند.

بررسی نام برنامه افزودنی به تنهایی کافی نیست، زیرا نام برنامه های افزودنی را می توان به راحتی ویرایش کرد. برای اطمینان از اینکه فقط تصاویر آپلود می شوند، باید نوع MIME را نیز بررسی کنید. شما می توانید از طریق file.mimetype به ویژگی mimetype یک فایل دسترسی داشته باشید. بنابراین، همانطور که برای نام پسوندها انجام دادید، ویژگی mimetype را با استفاده از روش تست بررسی کنید.

اگر این دو شرط به درستی برگردند، پاسخ تماس را با null و true برمی گردانید یا با خطا بر می گردانید.

در نهایت، ویژگی fileFilter را به پیکربندی multer خود اضافه می کنید.

const upload = multer({
  storage: storageEngine,
  limits: { fileSize: 10000000 },
  fileFilter: (req, file, cb) => {
    checkFileType(file, cb);
  },
});

مرحله 4: استفاده از مولتر به عنوان یک میان افزار اکسپرس

در مرحله بعد، شما باید کنترل‌کننده‌های مسیر را پیاده‌سازی کنید که بارگذاری تصویر را مدیریت می‌کنند.

مولتر بسته به پیکربندی می‌تواند آپلودهای تک و چند تصویر را مدیریت کند.

بلوک کد زیر را به فایل app.js خود اضافه کنید تا یک کنترل کننده مسیر برای آپلودهای تک تصویر ایجاد کنید:

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");
  }
});

در بلوک کد بالا، متد واحد را روی متغیر آپلود فراخوانی کردید، که پیکربندی multer شما را ذخیره می‌کند. این روش یک میان افزار را برمی گرداند که یک “فایل واحد” مرتبط با فیلد فرم داده شده را پردازش می کند. سپس، تصویر را به عنوان فیلد فرم ارسال کردید.

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

بلوک کد زیر را به فایل app.js خود اضافه کنید تا یک کنترلر مسیر برای آپلود چند تصویر ایجاد کنید:

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");
  }
});

در بلوک کد بالا، متد آرایه را روی متغیر آپلود فراخوانی کردید، که پیکربندی multer شما را ذخیره می‌کند. این روش دو آرگومان – نام فیلد و حداکثر تعداد – را می گیرد و میان افزاری را برمی گرداند که چندین فایل را با نام فیلد یکسان پردازش می کند. سپس، تصاویر را به‌عنوان فیلد فرم اشتراک‌گذاری شده و 5 را به‌عنوان حداکثر تعداد تصاویری که می‌توان همزمان آپلود کرد، ارسال کرد.

مزایای استفاده از مولتر

استفاده از Multer در برنامه‌های Node.js، فرآیند پیچیده آپلود و ذخیره تصاویر را مستقیماً در سرور شما ساده می‌کند. Multer همچنین بر اساس busboy، یک ماژول Node.js برای تجزیه داده‌های فرم ورودی است که آن را برای تجزیه داده‌های فرم بسیار کارآمد می‌کند.

منبع مقاله