העלאת מספר רב של קבצים במכה אחת לאתר ב-NodeJS
/uploadImages, בקידוד multipart/form-data. ל-input מסוג file נותנים שם חדש (myMultipleImages) ומוסיפים את המאפיין multiple.uploadImages. הודעת השגיאה משתנה ל"לא נשלחה תמונה או תמונות", כי המשתמש יכול לשלוח אחת או יותר.request.files: כשנבחר קובץ אחד, הערך של myMultipleImages הוא אובייקט. כשנבחרו כמה, הערך הוא מערך, גם אם בטופס הוגדר multiple בשני המקרים.Array.isArray עם אופרטור טרינרי. אם זה כבר מערך לוקחים אותו כמו שהוא, ואם זה אובייקט בודד עוטפים אותו במערך. אחרי השורה הזו files הוא תמיד מערך.for (const file of files) ועל כל קובץ מבצעים את אותן פעולות כמו בהעלאה הבודדת: לקיחת הסיומת המקורית ושמירה בתיקיית uploads עם שם ייחודי והסיומת.uploads, מעלים שלוש תמונות ורואים שלושה קבצים עם שמות ייחודיים. אחר כך מעלים תמונה אחת ורואים שהיא נוספה.פרקי ההרצאה: העלאת מספר רב של קבצים במכה אחת לאתר ב-NodeJS
תמלול ההרצאה: העלאת מספר רב של קבצים במכה אחת לאתר ב-NodeJS
הטקסט המלא של הדקות הראשונות בהרצאה «העלאת מספר רב של קבצים במכה אחת לאתר ב-NodeJS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז אחרי שראינו איך אנחנו יכולים להעלות לשרת קובץ תמונה אחת, אנחנו רוצים לראות איך אפשר להעלות סדרה של קבצים בבת אחת.
בואו ניקח רגע את כל הקוד הזה של ה-HTML, Upload Several Images, נשנה את זה ל-Upload Several Images. וקודם כל, למה בעצם? אולי אתם רוצים לאפשר ליוזר להעלות סדרה של תמונות, סדרה של קבצים, סדרה של מסמכים בבת אחת.
אתם לא רוצים שהוא יבחר אחד אחד. יש לנו כאן במקום גלישה ל-Route Upload Image בואו נגלוש ל-Upload Images. גם כן פוסט, תמיכה בקבצים, מולטי פרטפורם דאטה, יש לנו input type file, יש לנו name שהוא בעצם הגיוני שהוא יהיה שם אחר, בואו נקרא לו multiple images ושוב אנחנו רוצים לטפל רק בתמונות.
בכדי שהתיבה הזאת תוכל לתת לנו סדרה של קבצים, אז אנחנו צריכים להגדיר לה מלטיפל, דבר כזה. המאפיין הזה מגדיר סדרה של קבצים. אז מה אנחנו צריכים לעשות בצד של השרת בשביל לתמוך בזה?
ראשית, אנחנו צריכים לבנות את הראוט הזה, Upload Images. בואו נעבור לכאן, נעתיק את כל הראוט הראשון ונשנה Upload Images. זה ממש שני ראוטים שונים, אולי הם מאוד דומים מבחינת השם, אבל הם כמובן שונים.
נשנה את זה no image or images sent. כלומר, היוזר לא חייב לשלוח הרבה תמונות, הוא יכול לשלוח רק תמונה אחת או יותר. אז אמרנו לו, לא נשלחה שום תמונה ובטח שלא הרבה תמונות, מה אנחנו רוצים לעשות?
דבר ראשון, אין לנו פה פייל בודד, יש לנו פה סדרה של files. אבל בואו רגע נוריד את זה ונדפיס את request.files.
ואמרנו שזה נקרא, בואו נעתיק אפילו את ה-Name שלו, My Multiple Images, ואני רוצה לראות מה זה מכיל הדבר הזה כשאני מציג אותו על הקונסול.
בואו נפתח טרמינל, נריץ, נגלוש, אפשר לסגור את הטרמינל, ונבחר תמונה אחת, רק את הבאניז, אופן, נסתכל רגע למה סגרתי את הטרמינל, נסתכל על הטרמינל, אוי, לא לחצתי על Upload, נסתכל על הטרמינל ונראה שהוא נותן לי אובייקט,
שלאובייקט יש name ואת הדאטה, את הגודל שלו וכולי. בסדר, זה מעניין. עכשיו, שימו לב שהוא מסתיים פה, אני רוצה לבצע את אותו הדבר, בואו נחזור מרפרש, אבל נבחר את שלושת התמונות ואנחנו רואים פה three files, upload, אני רוצה לראות מה יש על הקונסול אבל אין פה אובייקט,
יש פה מערך וזה יכול טיפה לבלבל. אם אנחנו בחרנו פריט בודד אז הערך הוא אובייקט יחיד, הערך של my multiple images בלי קשר ל-v שהגדרנו פה מלטיפל.
מבחינת המערכת זה אובייקט בודד. אם אנחנו בחרנו סדרה של קבצים, אז מבחינת המערכת ה-value my multiple images שרואים אותו פה הוא מערך. אז תזכרו, אני לא יודע מה יוזר הולך לבחור, אולי הוא רוצה לבחור רק קובץ אחד, אפילו שיש לו את היכולת לבחור הרבה קבצים.
לכן בואו ניקח const files ונכניס לתוכו את הבדיקה הרי, זה ב-JavaScript בודק האם משהו הוא מארח או לא מארח. request files my multiple images זה בעצם היה השם.