نحوه اضافه کردن عکسهای پیشرفته در Node و Express

مقدمه
گاهی در هنگام ساختن برنامه Node خود با آپلود یک عکس (معمولاً از یک فرم) روبرو شده ایم که به عنوان عکس پروفایل برای کاربر در برنامه ما استفاده شود. علاوه بر این ، معمولاً برای دسترسی آسان باید عکس را در سیستم فایل محلی (در حین توسعه) یا حتی در ابر ذخیره کنیم. از آنجایی که این یک کار بسیار متداول است ، ابزارهای زیادی در دسترس است که می توانیم برای کنترل تک تک قسمتهای این فرآیند ، اهرم کنیم.
در این آموزش خواهیم دید که چگونه عکس را آپلود کرده و آن را قبل از نوشتن آن برای ذخیره سازی دستکاری کنید (تغییر اندازه ، کراپ ، سیاه سفید و غیره). ما برای سادگی خود را به ذخیره سازی فایل ها در سیستم فایل محلی محدود خواهیم کرد.
پیش نیازها
برای ساخت برنامه خود از بسته های زیر استفاده خواهیم کرد:
⦁ Express: یک سرور مجازی Node بسیار محبوب.
⦁ Lodash: یک کتابخانه بسیار مشهور JavaScript با بسیاری از کارکردهای مفید برای کار با آرایه ها ، رشته ها ، اشیاء و برنامه نویسی کاربردی.
⦁ Multer: بسته ای برای اکسترکت فایل ها از درخواست های multipart/form-data.
⦁ Jimp: بسته دستکاری تصویر.
⦁ Dotenv: بسته ای برای اضافه کردن متغیرهای .env به process.env.
⦁ Mkdirp: بسته ای برای ایجاد ساختار دایرکتوری تو در تو.
⦁ concat-stream: بسته ای برای ایجاد یک جریان قابل نوشتار که همه داده ها را از یک جریان جمع می کند و با نتیجه یک callback را فراخوانی میکند.
⦁ Streamifier : بسته ای برای تبدیل یک بافر / رشته به یک جریان قابل خواندن است.
اهداف پروژه
ما می خواهیم جریان فایل بارگذاری شده را از Multer دریافت کنیم و سپس بافر جریان (تصویر) را دستکاری کنیم ، اما می خواهیم قبل از نوشتن تصویر برای ذخیره سازی (سیستم فایل محلی) از Jimp استفاده کنیم . این امر مستلزم این است که یک موتور ذخیره سازی سفارشی ایجاد کنیم تا از Multer استفاده کند – که ما در این آموزش انجام خواهیم داد.
در این لینک، نتیجه نهایی آنچه در این آموزش خواهیم ساخت آمده است:
مرحله 1 – شروع کار
ما با ایجاد یک برنامه Express جدید با استفاده از ژنراتور Express شروع خواهیم کرد. اگر ژنراتور Express را از قبل ندارید ، باید ابتدا با اجرای دستور زیر در ترمینال خط فرمان خود آن را نصب کنید:
⦁ $ npm install express-generator -g
⦁

پس از تولید ژنراتور Express ، اکنون می توانید دستورات زیر را برای ایجاد یک برنامه Express جدید اجرا کنید و متعلقات Express را نصب کنید. ما از ejs به عنوان موتور نمایش استفاده خواهیم کرد:
⦁ $ express –view=ejs photo-uploader-app
⦁
⦁ $ cd photo-uploader-app
⦁
⦁ $ npm install

در مرحله بعد ، ما باقی مانده های متعلقات مورد نیاز برای پروژه خود را نصب خواهیم کرد:
⦁ $ npm install –save lodash multer jimp dotenv concat-stream streamifier mkdirp
⦁

مرحله 2 – پیکربندی اصول
قبل از ادامه ، برنامه ما به پیکربندی فرم نیاز دارد. یک فایل .env را در دیرکتوری اصلی پروژه خود ایجاد می کنیم و برخی از متغیرهای محیط را اضافه می کنیم. فایل .env باید مانند زیر باشد.
AVATAR_FIELD=avatar
AVATAR_BASE_URL=/uploads/avatars
AVATAR_STORAGE=uploads/avatars

در مرحله بعد ، متغیرهای محیطی خود را با استفاده از dotenv به process.env لود خواهیم کرد تا بتوانیم در برنامه خود به آنها دسترسی پیدا کنیم. برای این کار خط زیر را به فایل app.js اضافه خواهیم کرد. اطمینان حاصل کنید که این خط را در نقطه ای که اضافه کنید که متعلقات لود میشوند. باید قبل از ورودی دادن به تمام مسیرها و قبل از ایجاد نمونه برنامه Express اضافه شود.
app.js
var dotenv = require(‘dotenv’).config();

اکنون می توانیم با استفاده از process.env به متغیرهای محیطی خود دسترسی پیدا کنیم. به عنوان مثال: process.env.AVATAR_STORAGE باید دارای مقدار uploads/avatars باشد. ما در ادامه به ویرایش فایل مسیر ایندکس routes/index.js میپردازیم تا برخی متغیرهای محلی را که از نظر ما به آنها نیاز خواهیم داشت ، اضافه کنیم. دو متغیر محلی اضافه خواهیم کرد:
• title: عنوان صفحه فهرست ما: Upload Avatar
• avatar_field: نام فیلد ورودی برای عکس avatar ما. ما این را از process.env.AVATAR_FIELD دریافت خواهیم کرد .
مسیر GET / را به شرح زیر اصلاح کنید:
routes/index.js
router.get(‘/’, function(req, res, next) {
res.render(‘index’, { title: ‘Upload Avatar’, avatar_field: process.env.AVATAR_FIELD });
});

مرحله 3 – آماده سازی نما
بیایید با ایجاد نشانه گذاری پایه در فرم آپلود عکس خود با تغییر فایل views/index.ejs شروع کنیم. به خاطر سادگی ، سبک ها را مستقیماً به نمای خود اضافه خواهیم کرد تا ظاهری کمی زیبا به آن بخشیده شود. برای نشانه گذاری صفحه کد زیر را مشاهده کنید.
views/index.ejs
<html class=”no-js”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title><%= title %></title>
<style type=”text/css”>
* {
font: 600 16px system-ui, sans-serif;
}
form {
width: 320px;
margin: 50px auto;
text-align: center;
}
form > legend {
font-size: 36px;
color: #3c5b6d;
padding: 150px 0 20px;
}
form > input[type=file], form > input[type=file]:before {
display: block;
width: 240px;
height: 50px;
margin: 0 auto;
line-height: 50px;
text-align: center;
cursor: pointer;
}
form > input[type=file] {
position: relative;
}
form > input[type=file]:before {
content: ‘Choose a Photo’;
position: absolute;
top: -2px;
left: -2px;
color: #3c5b6d;
font-size: 18px;
background: #fff;
border-radius: 3px;
border: 2px solid #3c5b6d;
}

در این روش کارهای زیادی در حال انجام است اما خلاصه ای از کارهایی که انجام می شود در اینجا آمده است:
⦁ یک نام فایل تصادفی ایجاد می کند ، نوع mime تصویر خروجی Jimp را برطرف می کند و ابعاد تصویر را بدست می آورد.
⦁ در صورت لزوم ، براساس نیازهای ابعاد آستانه ، اندازه را تغییر میدهد تا اطمینان حاصل شود که کوچکترین ابعاد از آستانه تجاوز نمی کند.
⦁ اگر در گزینه ها فعال باشد ، تصویر را به یک مربع برش میدهد.
⦁ در صورت فعال بودن در گزینه ها ، تصویر را به مقیاس خاکستری تبدیل کنید.
⦁ کیفیت خروجی تصویر را از گزینه ها تنظیم کنید.
⦁ در صورت فعال بودن گزینه پاسخگو ، تصویر برای هر یک از اندازه های پاسخگو (lg ، md و sm) کلون شده و مقیاس بندی می شود و سپس یک جریان خروجی با استفاده از روش _createOutputStream () برای هر فایل تصویر در اندازه های مربوطه ایجاد می شود. نام فایل برای هر اندازه ، قالب [random_filename_hash]_[size].[output_extension] را می گیرد. سپس کلون تصویر و جریان در دسته ای برای پردازش قرار می گیرند.
⦁ اگر گزینه پاسخگو غیرفعال باشد ، فقط تصویر فعلی و یک جریان خروجی برای آن در دسته ای برای پردازش قرار می گیرد.
⦁ سرانجام ، با تبدیل یک بافر تصویر Jimp به یک جریان قابل خواندن با استفاده از streamifier و سپس لوله زنی جریان قابل خواندن به جریان خروجی ، هر مورد در دسته ای پردازش می شود.
اکنون روش های باقی مانده را پیاده سازی می کنیم و با موتور ذخیره سازی کار را به پایان میرسانیم.
// multer requires this for handling the uploaded file
AvatarStorage.prototype._handleFile = function(req, file, cb) {

// create a reference for this to use in local functions
var that = this;

توجه کنید که چگونه ما از میان افزار بارگذاری Multer قبل از کنترل مسیر خود عبور کردیم. روش single () به ما اجازه می دهد تا فقط یک فایل را که در req.file ذخیره می شود بارگذاری کنیم. به عنوان اولین پارامتر ، نام فیلد ورودی فایل را میگیرد که از process.env.AVATAR_FIELD به آن دسترسی پیدا می کنیم.
اکنون بیایید برنامه را با استفاده از شروع npm دوباره شروع کنیم.
⦁ $ npm start
⦁
به localhost: 3000 در مرورگر خود مراجعه کرده و سعی کنید عکسی بارگذاری کنید. در اینجا نمونه ای از عکسی از تست مسیر بارگذاری در Postman با استفاده از گزینه های تنظیمات فعلی ما اسکرین شات گرفته ام آمده است:

می توانید گزینه های پیکربندی موتور ذخیره سازی را در تنظیمات Multer مورد نظر خود قرار دهید تا نتایج مختلفی کسب کنید.
نتیجه
در این آموزش ، ما توانسته ایم موتور ذخیره سازی سفارشی را برای استفاده با Multer ایجاد کنیم که تصاویر بارگذاری شده را با استفاده از Jimp دستکاری کرده و سپس آنها را برای ذخیره سازی می نویسد. برای نمونه کامل کد این آموزش ، منبع advanced-multer-node-sourcecode در Github را بررسی کنید.

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade