ישנן שלוש דרכים עיקריות לטיפול בהעלאות קבצים ב-Node.js: שמירת התמונות ישירות לשרת שלך, שמירת התמונה של התמונה נתונים בינאריים או נתוני מחרוזת base64 למסד הנתונים שלך, ושימוש בדליים של Amazon Web Service (AWS) S3 כדי לשמור ולנהל את תמונות.
כאן תלמד כיצד להשתמש ב-Multer, תוכנת אמצעים של Node.js, כדי להעלות ולשמור תמונות ישירות לשרת שלך ביישומי Node.js בכמה שלבים.
שלב 1: הגדרת סביבת פיתוח
הקוד המשמש בפרויקט זה זמין ב-a מאגר GitHub והוא בחינם עבורך לשימוש תחת רישיון MIT.
ראשית, צור תיקיית פרויקט ועבר אליה על ידי הפעלת הפקודה הבאה:
mkdir-multer-tutorial
CD רב-הדרכה
לאחר מכן, אתחל את npm בספריית הפרויקט שלך על ידי הפעלת:
npm init -y
לאחר מכן, תצטרך להתקין כמה תלות. התלות הנדרשות למדריך זה כוללות:
- אֶקְסְפּרֶס: Express היא מסגרת Node.js המספק קבוצה חזקה של תכונות עבור יישומי אינטרנט וניידים. זה מקל על בניית יישומי backend עם Node.js.
- מולטר: Multer היא תוכנת ביניים אקספרס שמפשטת העלאה ושמירת תמונות לשרת שלך.
התקן את החבילות עם מנהל חבילות הצומת על ידי ריצה:
npm להתקין אקספרס מולטר
לאחר מכן, צור app.js קובץ בספריית השורש של הפרויקט שלך והוסף את בלוק הקוד למטה כדי ליצור שרת Express בסיסי:
//app.js
const express = לִדרוֹשׁ('אֶקְסְפּרֶס');
const app = express();
const port = process.env. PORT || 3000;
app.listen (יציאה, ()=>{
לְנַחֵם.עֵץ(`האפליקציה מאזינה ביציאה ${port}`);
});
שלב 2: הגדרת Multer
ראשית, ייבוא מלטר אצלך app.js קוֹבֶץ.
const מלטר = לִדרוֹשׁ("מולטר");
מלטר דורש מנוע אחסון המכיל מידע על הספרייה שבה יאוחסנו הקבצים שהועלו וכיצד יקבלו שמות הקבצים.
א מלטר מנוע האחסון נוצר על ידי קריאה ל- דיסק Storage שיטה על המיובא מלטר מודול. שיטה זו מחזירה את א מנוע אחסון יישום מוגדר לאחסון קבצים במערכת הקבצים המקומית.
זה דורש אובייקט תצורה עם שני מאפיינים: יַעַד, שהיא מחרוזת או פונקציה שמציינת היכן יאוחסנו התמונות שהועלו.
הנכס השני, שם קובץ, היא פונקציה שקובעת את שמות הקבצים שהועלו. זה דורש שלושה פרמטרים: req, קוֹבֶץ, והתקשרות חזרה (cb). req הוא האקספרס בַּקָשָׁה לְהִתְנַגֵד, קוֹבֶץ הוא אובייקט המכיל מידע על הקובץ המעובד, ו cb הוא התקשרות חוזרת הקובעת את שמות הקבצים שהועלו. פונקציית ההתקשרות חוזרת לוקחת שגיאה ושם קובץ כארגומנטים.
הוסף את בלוק הקוד שלהלן שלך app.js קובץ ליצירת מנוע אחסון:
//הגדרת מנוע אחסון
const storageEngine = multer.diskStorage({
יַעַד: "./images",
שם קובץ: (req, file, cb) => {
cb(ריק, `${תַאֲרִיך.עַכשָׁיו()}--${file.originalname}`);
},
});
בבלוק הקוד למעלה, אתה מגדיר את יַעַד רכוש ל"./images", לפיכך, התמונות יאוחסנו בספריית הפרויקט שלך ב- תמונות תיקייה. ואז, בהתקשרות חזרה, עברת ריק בתור השגיאה ומחרוזת תבנית כשם הקובץ. מחרוזת התבנית מורכבת מחותמת זמן שנוצרת על ידי קריאה Date.now() כדי להבטיח ששמות התמונות יהיו תמיד ייחודיים, שני מקפים להפרדה בין שם הקובץ וחותמת הזמן, והשם המקורי של הקובץ, שאליו ניתן לגשת קוֹבֶץ לְהִתְנַגֵד.
המחרוזות שיתקבלו מתבנית זו ייראו כך: 1663080276614--example.jpg.
לאחר מכן, עליך לאתחל מלטר עם מנוע האחסון.
הוסף את בלוק הקוד שלהלן שלך app.js קובץ לאתחול מולטר עם מנוע האחסון:
//אתחול מולטר
const upload = multer({
אחסון: מנוע אחסון,
});
מלטר מחזירה מופע Multer המספק מספר שיטות ליצירת תוכנת ביניים המעבדת קבצים שהועלו נתונים מרובים/טופס פוּרמָט.
בבלוק הקוד למעלה, אתה מעביר אובייקט תצורה עם a אִחסוּן מאפיין מוגדר ל מנוע אחסון, שהוא מנוע האחסון שיצרת קודם לכן.
נכון לעכשיו, תצורת Multer שלך הושלמה, אך אין כללי אימות המבטיחים שניתן לשמור רק תמונות בשרת שלך.
שלב 3: הוספת כללי אימות תמונה
כלל האימות הראשון שאתה יכול להוסיף הוא הגודל המקסימלי המותר להעלות תמונה לאפליקציה שלך.
עדכן את אובייקט תצורת ה-multer שלך עם בלוק הקוד שלהלן:
const upload = multer({
אחסון: מנוע אחסון,
גבולות: { גודל הקובץ: 1000000 },
});
בבלוק הקוד למעלה, הוספת א גבולות מאפיין לאובייקט התצורה. מאפיין זה הוא אובייקט המציין מגבלות שונות על נתונים נכנסים. אתה מגדיר את גודל הקובץ מאפיין, שבאמצעותו מוגדר גודל הקובץ המרבי בבייטים 1000000, שזה שווה ערך ל-1MB.
כלל אימות נוסף שאתה יכול להוסיף הוא מסנן קבצים מאפיין, פונקציה אופציונלית לשליטה באילו קבצים יועלו. פונקציה זו נקראת עבור כל קובץ שמעובד. פונקציה זו לוקחת את אותם פרמטרים כמו ה- שם קובץ פוּנקצִיָה: req, קוֹבֶץ, ו cb.
כדי להפוך את הקוד שלך לנקי יותר וניתן לשימוש חוזר יותר, תפשט את כל היגיון הסינון לפונקציה.
הוסף את בלוק הקוד שלהלן שלך app.js קובץ כדי ליישם את הלוגיקה של סינון הקבצים:
const נתיב = לִדרוֹשׁ("נָתִיב");
const checkFileType = פוּנקצִיָה (קובץ, cb) {
//הרחבות קבצים מותרות
const fileTypes = /jpeg|jpg|png|gif|svg/;
//חשבון סיומת שמות
const extName = fileTypes.test (path.extname (file.originalname).toLowerCase());
const mimeType = fileTypes.test (file.mimetype);
if (mimeType && extName) {
לַחֲזוֹר cb(ריק, נָכוֹן);
} אַחֵר {
cb("שגיאה: ניתן להעלות רק תמונות!!");
}
};
ה checkFileType הפונקציה לוקחת שני פרמטרים: קוֹבֶץ ו cb.
בבלוק הקוד למעלה, הגדרת את א סוגי קבצים משתנה המאחסן ביטוי רגולרי עם סיומות קובץ התמונה המותרות. לאחר מכן, התקשרת ל- מִבְחָן שיטה על הביטוי הרגולרי.
ה מִבְחָן השיטה בודקת התאמה במחרוזת שעברה ומחזירה נָכוֹן אוֹ שֶׁקֶר תלוי אם הוא מוצא התאמה. לאחר מכן, אתה מעביר את שם הקובץ שהועלה, שאליו תוכל לגשת דרכו file.originalname, למודול של הנתיב שם חיצוני שיטה, המחזירה את הרחבה של נתיב המחרוזת אליה. לבסוף, אתה משרשר את ה-JavaScript toLowerCase פונקציית מחרוזת לביטוי כדי לטפל בתמונות עם שמות הסיומות שלהן באותיות רישיות.
בדיקת שם התוסף בלבד אינה מספיקה, שכן ניתן לערוך בקלות את שמות התוספות. כדי להבטיח שרק תמונות מועלות, עליך לבדוק את סוג MIME גַם. אתה יכול לגשת לקובץ סוג פנטומימה רכוש דרך ה file.mimetype. אז, אתה בודק את סוג פנטומימה נכס באמצעות מִבְחָן שיטה כפי שעשית עבור שמות הסיומות.
אם שני התנאים חוזרים כ-true, אתה מחזיר את ההתקשרות חזרה עם ריק ו-true, או שאתה מחזיר את ההתקשרות עם שגיאה.
לבסוף, אתה מוסיף את מסנן קבצים נכס לתצורת המולטר שלך.
const upload = multer({
אחסון: מנוע אחסון,
גבולות: { גודל הקובץ: 10000000 },
fileFilter: (req, file, cb) => {
checkFileType (קובץ, cb);
},
});
שלב 4: שימוש ב-Multer כתוכנה אקספרס
לאחר מכן, עליך ליישם מטפלי מסלול שיטפלו בהעלאות התמונות.
Multer יכול להתמודד עם העלאות תמונות בודדות ומרובות בהתאם לתצורה.
הוסף את בלוק הקוד שלהלן שלך app.js קובץ ליצירת מטפל במסלול להעלאות תמונה בודדת:
app.post("/single", upload.single("תמונה"), (req, res) => {
אם (req.קוֹבֶץ) {
res.send("קובץ בודד הועלה בהצלחה");
} אַחֵר {
res.status (400).send("נא להעלות תמונה חוקית");
}
});
בבלוק הקוד שלמעלה, קראת ל- יחיד שיטה על להעלות משתנה, המאחסן את תצורת המולטר שלך. שיטה זו מחזירה תוכנת ביניים המעבדת "קובץ בודד" המשויך לשדה הטופס הנתון. לאחר מכן, עברת את תמונה בתור שדה הטופס.
לבסוף, בדוק אם קובץ הועלה דרך req חפץ ב קוֹבֶץ תכונה. אם כן, אתה שולח הודעת הצלחה, אחרת אתה שולח הודעת שגיאה.
הוסף את בלוק הקוד שלהלן שלך app.js קובץ ליצירת מטפל במסלול להעלאות תמונות מרובות:
app.post("/multiple", upload.array("תמונות", 5), (req, res) => {
אם (req.קבצים) {
res.send("מספר קבצים הועלו בהצלחה");
} אַחֵר {
res.status (400).send("נא להעלות תמונה חוקית");
}
});
בבלוק הקוד שלמעלה, קראת ל- מַעֲרָך שיטה על להעלות משתנה, המאחסן את תצורת המולטר שלך. שיטה זו לוקחת שני ארגומנטים - שם שדה וספירה מקסימלית - ומחזירה תוכנת ביניים שמעבדת מספר קבצים החולקים את אותו שם שדה. ואז, עברת תמונות כשדה הטופס המשותף ו-5 כמספר המרבי של תמונות שניתן להעלות בבת אחת.
יתרונות השימוש ב-Multer
השימוש ב-Multer ביישומי Node.js שלך מפשט את התהליך המסובך אחרת של העלאה ושמירת תמונות ישירות בשרת שלך. Multer מבוסס גם על busboy, מודול Node.js לניתוח נתוני טפסים נכנסים, מה שהופך אותו ליעיל מאוד לניתוח נתוני טופס.
