از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
مدیریت آپلود فایل در Node.js با Express و MulterUsers نه تنها داده مصرف می کند، بلکه داده تولید و آپلود می کند. آنها می‌توانند داده‌ها را از طریق برنامه‌هایی مانند پیام‌رسان یا ایمیل برای گیرندگان خاص ارسال کنند یا فایل‌ها را در شبکه‌های اجتماعی و پلتفرم‌های جریان داده مانند فیس‌بوک یا یوتیوب آپلود کنند. همانطور که گفته شد، امروزه تقریباً هر وب سایت تعاملی از فایل …
سرفصلهای مطلب
معرفی
کاربران نه تنها داده ها را مصرف می کنند، بلکه داده ها را نیز تولید و آپلود می کنند. آنها می‌توانند داده‌ها را از طریق برنامه‌هایی مانند پیام‌رسان یا ایمیل برای گیرندگان خاص ارسال کنند یا فایل‌ها را در شبکه‌های اجتماعی و پلتفرم‌های جریان داده مانند فیس‌بوک یا یوتیوب آپلود کنند.
همانطور که گفته شد، امروزه تقریباً هر وب سایت تعاملی از آپلود فایل پشتیبانی می کند.
کتابخانه های آپلود فایل
چندین کتابخانه Node موجود است روی NPM که می تواند آن را ساده کند process اعتبارسنجی و آپلود فایل ها در سرور در این میان، محبوب ترین انتخاب این روزها هستند مولتر، مهیب، و چند حزبی.
همه آنها دارای نسخه های پایدار هستند و توسط یک جامعه آنلاین از توسعه دهندگان منبع باز پشتیبانی می شوند.
مولتر چیست؟
مولتر یک میان افزار محبوب Node.js است که برای مدیریت استفاده می شود multipart/form-data درخواست ها. استفاده می کند busboy برای تجزیه هر داده ای که از طریق یک فرم HTML دریافت کرده است. این کارکرد آن را تا حد زیادی افزایش می دهد زیرا ماژول busboy در تجزیه و تحلیل داده های فرم بی همتا است.
مولتر در هنگام جابجایی، کنترل و انعطاف پذیری را برای ما فراهم می کند multipart/form-data درخواست ها – ما اطلاعات دقیقی در مورد هر فایل آپلود شده دریافت می کنیم، توانایی اضافه کردن یک موتور ذخیره سازی سفارشی، اعتبارسنجی فایل ها با توجه به نیازهایمان، توانایی تعیین محدودیت ها روی فایل های آپلود شده و غیره
راه اندازی پروژه
از آنجایی که ما تصاویر خود را در یک پایگاه داده ذخیره نمی کنیم، بلکه یک پوشه ساده برای اختصار و سادگی است، بیایید یک پوشه دیگر در پوشه پروژه خود ایجاد کنیم و نام آن را مثلاً uploads.
حالا بیایید Express را نصب کنیم:
$ npm i express
و در نهایت اجازه دهید مولتر را نصب کنیم:
$ npm i multer
اجرای پروژه
در این مرحله، ما آماده هستیم تا مقداری کد بنویسیم و با فرم‌های HTML که برای جمع‌آوری اطلاعات استفاده می‌کنیم، شروع کنیم.
بیایید با فرم آپلود یک فایل شروع کنیم:
<form method="POST" action="/upload-profile-pic" enctype="multipart/form-data">
<div>
<label>Select your profile picture:</label>
<input type="file" name="profile_pic" />
</div>
<div>
<input type="submit" name="btn_upload_profile_pic" value="Upload" />
</div>
</form>
و سپس با فرمی که به ما امکان می دهد چندین فایل را آپلود کنیم:
<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>
می توانید این فرم ها را هم قرار دهید روی صفحات جداگانه یا روی همان یکی برای هدف این آموزش، آنها یکی پس از دیگری هستند:
فرم های HTML بسیار ساده و قابل قبول هستند multipart/form-data و مسیریابی به توابع کافی که به درخواست های آنها رسیدگی می کنند.
برنامه اکسپرس
با فرم های آماده می توانیم کار کنیم روی منطق واقعی برای آپلود و اعتبارسنجی فایل ها از طریق Express.
بیایید یک فایل به نام ایجاد کنیم app.js در پروژه root و با وارد کردن ماژول های مورد نیاز شروع کنید:
const express = require('express');
const multer = require('multer');
const path = require('path');
اکنون، بیایید برنامه Express خود را ایجاد کنیم:
const app = express();
و در نهایت، اجازه دهید پورت را راه اندازی کنیم روی که اجرا خواهد شد:
const port = process.env.PORT || 3000;
این public دایرکتوری خارج از ما root پوشه حاوی فایل‌های ثابتی است که می‌خواهیم سرویس دهیم، بنابراین بیایید آن را به عنوان یک دایرکتوری استاتیک با استفاده از آن تنظیم کنیم express.static:
app.use(express.static(__dirname + '/public'));
در این مرحله، بیایید مکان ذخیره سازی تصاویر خود را تعریف کنیم:
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));
}
});
و در نهایت، اجازه دهید برنامه را با استفاده از پورتی که قبلا تنظیم کرده بودیم اجرا کنیم:
app.listen(port, () => console.log(`Listening روی port ${port}...`));
اعتبار سنجی و آپلود فایل
به دلایل امنیتی اساسی، ما می خواهیم فایل ها را قبل از آپلود آنها در سرورهای خود تأیید کنیم. بیایید ویرایش کنیم app.js فایل کنید و هر دو قابلیت را اضافه کنید:
app.post('/upload-profile-pic', (req, res) => {
// 'profile_pic' is the name of our file input field in the HTML form
let upload = multer({ storage: storage, fileFilter: helpers.imageFilter }).single('profile_pic');
upload(req, res, function(err) {
// req.file contains information of uploaded file
// req.body contains information of text fields, if there were any
if (req.fileValidationError) {
return res.send(req.fileValidationError);
}
else if (!req.file) {
return res.send('Please select an image to upload');
}
else if (err instanceof multer.MulterError) {
return res.send(err);
}
else if (err) {
return res.send(err);
}
// Display uploaded image for user validation
res.send(`You have uploaded this image: <hr/><img src="${req.file.path}" width="500"><hr /><a href="./">Upload another image</a>`);
});
});
در اینجا، ما یک مورد را پذیرفته ایم HTTP POST درخواست، که در آن اطلاعات تصویر مجسم شده است. تابعی که در واقع از عملکرد آپلود مراقبت می کند multer().single() روش.
شاید متوجه شده باشید fileFilter: helpers.imageFilter اما ما هنوز آن را ایجاد/وارد نکرده ایم helpers فایل. بنابراین، بیایید یک فایل جدید در فهرست پروژه خود ایجاد کنیم و نام آن را بگذاریم helpers.js. در اینجا کدی می نویسیم که برای بررسی اینکه آیا فایل ارسالی یک تصویر است یا خیر، استفاده می شود.
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);
};
exports.imageFilter = imageFilter;
البته برای استفاده از این ماژول، مجبوریم import آن را در بالای ما app.js فایل:
const helpers = require('./helpers');
اکنون، می‌توانیم برنامه خود را اجرا کنیم و تأیید کنیم که درست کار می‌کند:
آپلود چندین فایل
آپلود چند فایل اساساً مشابه آپلود یک فایل است. اگرچه، به جای multer().single() تابع، ما از multer().array() تابع:
app.post('/upload-multiple-images', (req, res) => {
// 10 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: helpers.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 روی 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);
});
});
و اکنون، برای تأیید اینکه آیا همه چیز درست کار می کند یا خیر:
نتیجه
کاربران نه تنها داده ها را مصرف می کنند، بلکه داده ها را تولید می کنند و در بسیاری از موارد نیاز به آپلود آن ها در وب سرور دارند. آنها می توانند داده ها را از طریق برنامه هایی مانند پیام رسان یا ایمیل برای گیرندگان خاص ارسال کنند، یا می توانند فایل ها را در شبکه های اجتماعی و پلت فرم های پخش داده مانند فیس بوک یا یوتیوب آپلود کنند.
در این مقاله ما از Express.js و کتابخانه مولتر برای مدیریت عملکرد اولیه آپلود فایل در یک برنامه وب ساده استفاده کرده ایم.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-24 10:48:06
