שליחת תמונה לשרת בריאקט - React Forms
FormData ושולחים אותו במקום אובייקט המוצר. ההרצאה מראה איך ממלאים אותו ואיך לוקחים תמונה אחת מתוך ה-FileList.const data = new FormData(). זה אובייקט native של JavaScript.append(name, value). הערך חייב להיות string או Blob (קובץ), ולכן את price ו-stock ממירים למחרוזת.append חייב להיות זה שהשרת מצפה לו, ולכן בודקים בתיעוד של ה-Backend. כאן הוא מקבל name, price, stock, ואת התמונה בשם image. ה-imageName הוא רק מה שהשרת מחזיר.product.image הוא FileList. מסירים את התכונה multiple מהתיבה כדי שאפשר יהיה לבחור קובץ אחד, ומשתמשים בפריט הראשון, item(0) או [0].axios.post את ה-FormData ולא את האובייקט המקורי. האובייקט מ-useForm מתאים רק כשאין בו קבצים.Images של השרת.multiple אי אפשר לבחור כמה קבצים, אבל התיבה עדיין מחזירה FileList.פרקי ההרצאה: שליחת תמונה לשרת בריאקט - React Forms
תמלול ההרצאה: שליחת תמונה לשרת בריאקט - React Forms
הטקסט המלא של הדקות הראשונות בהרצאה «שליחת תמונה לשרת בריאקט - React Forms» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז איך אנחנו גורמים גם לתמונה להישלח לשרה? מה שאנחנו צריכים לעשות זה לבנות אובייקט מסוג form data. form data זה בעצם פוסט נתונים שכבר קיים ב-JavaScript native.
בואו נבנה כאן form data data שווה new form data ואנחנו פשוט הולכים ל-form data ואומרים לו append. אנחנו חייבים לתת לו name ו-value כי אלה הדברים שנשלחים לשרת, בדיוק ה-name הולך להישלח כ-name וה-value הולך להישלח כ-value, ושימו לב שה-value זה או string או blob, blob זה Binary Large Object,
כלומר קבצים. אז אנחנו רוצים לשלוח קודם כל פריט אחד שנקרא name, ושה-value שלו זה product.name.
אנחנו רוצים לשלוח עוד משתנה שנקרא Price וה-Value שלו זה Product.Price אבל אנחנו רואים שהוא לא מקבל את זה מפני שהוא אומר לי תשמע אני יודע לשלוח או סטרינגים או בלובים שזה קבצים אז אם אתה רוצה תהפוך לי אותו לסטרינג בבקשה הפכנו בואו ניתן לו עוד רופרטי שנקרא סטוק וזה בעצם יהיה הסטוק הוא גם כן חייב להיות סטרינגי
ואנחנו רוצים לתת לו את האימג'. וכאן אנחנו רוצים לשלוח את האימג', כבר נראה איך עושים את זה, אבל הערה חשובה, הנימינג שאתם נותנים פה זה לא שם מומצא שאתם יכולים להמציא, זה מה שרת מצפה לקבל.
השרת מצפה לקבל אובייקט product או product model שיש לו מאפיין שנקרא name, לכן זה נקרא name, ויש לו מאפיין שנקרא פרייס, זה מה שהשרת יודע לעבוד, ככה השרת עובד, ה-Backend הזה, ולכן פרייס.
אם אנחנו רוצים לדעת בדיוק, אנחנו פשוט לוקחים את זה, גולשים ומסתכלים בדיוק מה המידע שהשרת עובד איתו.
אנחנו רואים שהוא עובד עם Name ואנחנו רואים שהוא עובד עם Price ו-Stock. יש כאן Image Name שזה לא משהו שאנחנו מתעסקים איתו ואנחנו לא רואים פה את ה-Image, אבל זה אומר שאנחנו צריכים להמשיך לקרוא את הדוקומנטציה של ה-Backend הזה, כי כאן הוא לא מחזיר לנו בג'ייסון הזה את ה-Image, ה-Image זה רק משהו שאנחנו שולחים אליו.
אז זה באמת משהו שחשוב לראות עם הדוקומנטציה, אני כבר מכיר את ה-Backend הזה, ואני יודע שהוא מצפה לקבל תמונה של מוצר בהקשר הזה, והתמונה פשוט נקראת Image, זה השם שלה.
ואז אנחנו יודעים שיש לנו product.stock.image סליחה סליחה לא product.stock product.image אבל משהו לא מסתדר מפני ש-image זה פייל ליסט למה זה פייל ליסט זה פייל ליסט בגלל שהתיבה הזאת נותנת לנו רשימה של קבצים כי היוזר יכול בעזרת קונפיגורציה מסוימת להכניס מספר קבצים אם יש לנו פה את המאפיין
מלטיפל אז זה אומר שכאשר היוזר רגע אולי אני רק יוריד את זה שהוא לא ייתן לי שם השגיאת ריצה אם אני אנסה כרגע לבחור קובץ אני רואה שאני