آپلود فایل در MERN Stack با Multir و Cloud Storage 🌐🚀

در برنامه‌های کاربردی وب مدرن، آپلود فایل یک نیاز رایج است، چه برای نمایه‌های کاربر، چه برای ارسال اسناد یا به اشتراک گذاری رسانه. در این پست وبلاگ، نحوه پیاده سازی آپلود فایل در یک برنامه پشته MERN با استفاده از Multer برای مدیریت آپلود فایل و ادغام با سرویس های ذخیره سازی ابری مانند AWS S3 را بررسی خواهیم کرد. این ترکیب امکان مدیریت فایل های مقیاس پذیر و کارآمد را در برنامه های شما فراهم می کند. بیایید شروع کنیم! 🎉

مولتر چیست؟ 📁
مولتر یک میان‌افزار برای Node.js است که فرآیند مدیریت داده‌های چندبخشی/فرم را که عمدتاً برای آپلود فایل‌ها استفاده می‌شود، ساده می‌کند. مدیریت آپلود فایل در برنامه های Express.js را آسان می کند.

ویژگی های کلیدی مولتر:

• ادغام آسان: به طور یکپارچه با Express.js ادغام می شود.
• File Filtering: به شما امکان می دهد فایل ها را بر اساس نوع یا اندازه فیلتر کنید.
• گزینه های ذخیره سازی: از گزینه های ذخیره سازی محلی و ابری پشتیبانی می کند.

راه اندازی آپلود فایل با Multer در برنامه MERN Stack 🛠️

مرحله 1: پروژه MERN خود را راه اندازی کنید

• 1. ایجاد یک فهرست جدید:

ضربه شدید
mkdir mern-file-upload
cd mern-file-upload

• 2. پروژه Node.js را راه اندازی کنید:

ضربه شدید
npm init -y

• 3. بسته های مورد نیاز را نصب کنید:

ضربه شدید
npm نصب express mongoose multer cors dotenv aws-sdk multer-s3

مرحله 2: سرور Express خود را ایجاد کنید

1. ایجاد فایل server.js: در ریشه پروژه خود، یک فایل به نام server.js ایجاد کنید و کد زیر را اضافه کنید:

جاوا اسکریپت
const express = require('express');
const mongoose = need('mongoose');
const cors = require('cors');
const dotenv = require('dotenv');

dotenv.config();

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());

// اتصال به MongoDB (اختیاری)
mongoose.connect(process.env.MONGODB_URI، {
useNewUrlParser: true،
useUnifiedTopology: true،
})
.then(() => console.log (“MongoDB متصل است”))
.catch(err => console.error(err));

app.listen(PORT، () => {
console.log(Server is running on port ${PORT})
})؛

مرحله 3: مولتر را برای آپلود فایل پیکربندی کنید

1. Setup Multer Storage: یک فایل جدید به نام upload.js ایجاد کنید و Multer را پیکربندی کنید:

جاوا اسکریپت
const multer = require('multer');
const multerS3 = require('multer-s3');
const AWS = require('aws-sdk');

// AWS SDK را پیکربندی کنید
AWS.config.update({
accessKeyId: process.env.AWS_ACCESS_KEY_ID،
SecretAccessKey: process.env.AWS_SECRET_ACCESS_KEY،
منطقه: process.env.AWS_REGION،
})؛

const s3 = new AWS.S3();

// ذخیره سازی مولتر را با استفاده از S3 پیکربندی کنید
const upload = multer({
ذخیره سازی: multerS3({
s3: s3،
bucket: process.env.S3_BUCKET_NAME،
acl: «خوانش عمومی»،
ابرداده: (قیمت، فایل، cb) => {
cb(null، {fieldName: file.fieldname });
}،
کلید: (قیمت، فایل، cb) => {
cb(null, ${Date.now()}-${file.originalname}) // نام فایل منحصر به فرد
}،
})
})؛

module.exports = آپلود;

مرحله 4: مسیر آپلود فایل را ایجاد کنید

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

جاوا اسکریپت
const upload = نیاز ('./upload');

app.post('/upload', upload.single('file'), (قیمت، پاسخ) => {
if (!req.file) {
return res.status(400).send('هیچ فایلی آپلود نشد.');
}

res.send({
پیام: “فایل با موفقیت آپلود شد!”،
fileUrl: req.file.location، // URL فایل آپلود شده در S3
})؛
})؛

مرحله 5: تنظیم متغیرهای محیطی

یک فایل .env در ریشه پروژه خود ایجاد کنید و اعتبارنامه AWS و MongoDB URI خود را اضافه کنید:

متن
AWS_ACCESS_KEY_ID=شماره_کلید_دسترسی شما
AWS_SECRET_ACCESS_KEY=کلید_مخفی_دسترسی شما
AWS_REGION=منطقه_aws_شما
S3_BUCKET_NAME=نام سطل_s3 شما
MONGODB_URI=your_mongodb_uri (اختیاری)

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

نمونه درخواست با پستچی:

• نوع درخواست را روی POST قرار دهید.
• URL را به عنوان http://localhost:5000/upload وارد کنید.
• در تب Body، “form-data” را انتخاب کنید و یک کلید با نام فایل با نوع تنظیم شده روی “File” اضافه کنید و یک فایل را برای آپلود انتخاب کنید.

نتیجه گیری 🎊

با ادغام مولتر با سرویس‌های ذخیره‌سازی ابری مانند AWS S3، می‌توانید آپلود فایل‌ها را در برنامه‌های پشته MERN خود مدیریت کنید. این راه‌اندازی نه تنها مقیاس‌پذیری را فراهم می‌کند، بلکه تضمین می‌کند که فایل‌های شما به طور ایمن ذخیره شده و به راحتی قابل دسترسی هستند.

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

اجرای این تکنیک ها را از امروز برای ایجاد برنامه های کاربردی قوی که می توانند آپلود فایل ها را یکپارچه انجام دهند، شروع کنید! 💻✨