כיצד להעלות קבצים לאחסון Firebase באמצעות JavaScript?
מדריך זה יעזור לך להקים חשבון ולאחר מכן להשתמש בממשק ה- API להעלאת קבצים לאחסון Firebase.
Firebase היא פלטפורמת פיתוח יישומים ברשת ובנייד, שפותחה בשנת 2011 ונרכשה מאוחר יותר על ידי גוגל. Firebase מספקת למפתחים מגוון רחב של שירותים וכלים - חלקם בחינם. הוא מציע מתקני אחסון ומתקן מסדי נתונים המפחית את התלות בצד השרת ומבטל את בעיית הטיפול בקבצים למינימום מוחלט. מדריך זה יעזור לך להקים חשבון ולאחר מכן להשתמש בממשק ה- API להעלאת קבצים לאחסון Firebase.
חלק 1 מתוך 2: הגדרת Google Firebase
- 1הגדר חשבון firebase. צור חשבון firebase אם עדיין לא יצרת חשבון. עבור אל הקונסולה והוסף פרויקט חדש. מלא שם טוב וצור פרויקט.
- 2הוסף את Firebase לאפליקציית האינטרנט שלך. לחלופין, תוכל להוסיף את Firebase לאפליקציית Android / אפליקציית iOS. אם אתה משתמש במסגרת javaScript לבניית היישום שלך, השלבים צריכים להיות דומים למדי. העתק את נתוני התצורה לקוד ה- HTML שלך ואז תוכל להשתמש ב- AJAX כדי לדחוף נתונים לאחסון Firebase שלך.
- 3בחר באפשרויות האחסון. Firebase מאפשר לך להגדיר כללים לגבי האופן שבו ברצונך לאחסן את הקבצים שלך ולהגדיר עליהם בקרות גישה. הקבצים נשמרים ב- Google Cloud Storage.
- לחלופין, תוכלו לאחסן את ההפניות לקבצים ב- Firebase ואז להשתמש בתשתית אחסון ענן אחרת לצורך אחסון הקבצים בפועל. לדוגמה, באפשרותך לשלב את Firebase עם אמזון S3 לאחסון קבצים או Cloudinary לאחסון תמונות JavaScript.
ניתן לטפל בכך במשימת ההעלאה בשיטת.catch () כמפורט להלן: task.
חלק 2 מתוך 2: יצירת חזית להעלאת קבצים
- 1הגדר את הסביבה. ברוב ספריות ה- JavaScript החזיתיות הגדולות כמו React, Angular ו- Vue יש ספריות פופולריות שמשלבות אותן עם Firebase. אם בספריית החזית שלך יש מודול Firebase, כמו AngularFire for Angular, כדאי לך לשקול להשתמש בזה. במאמר זה, אנו הולכים לכתוב סקריפט העלאת קבצים AJAX כדי לדחוף קבצים לאחסון Firebase.
- 2צור הפניה לאחסון Firebase בתוך אפליקציית האינטרנט שלך. זה חשוב אם אתה צריך לגשת לאחסון Firebase.
const ref = firebase.storage (). ref ();
- 3צור שדה קלט. לאחר שתסיים, גש לקובץ שיש להעלות מהקלט [type = "file"]. אם אתה משתמש ב- jQuery, הקוד ייראה כך.
קובץ const = $ ('# photo'). get (0).files [0]; - 4הכן את הקבצים. לפני העלאת הקובץ תצטרך להכין את שם הקובץ כמו גם את המטא נתונים עבור הקובץ שאתה מעלה. לא מומלץ שיהיה שם הקובץ כמזהה היחיד. חותמת זמן היא שדה שניתן להוסיף לשם הקובץ:
שם const = (+ תאריך חדש ()) + '-' + file.name;
- 5צור משימת העלאה. על מנת ליצור את משימת ההעלאה עבור הקובץ, תוכל לבצע זאת בשיטת.פוט (). בעיקרו של דבר, משימה זו היא הבטחה ולכן ניתן להפעילה בהמשך בקלות באותה מידה. הפקודה כאן תהיה
משימה const = ref.child (שם).put (קובץ, מטא נתונים);
משימת העלאת הקובץ תומכת גם במספר שיטות שונות כולל task.resume (), task. בטל () ומשימה. הפסקה().
- 6אחזר את התגובה מכתובת האתר. אתה יכול להשתמש בהבטחה כדי לקבל החלטה כאשר מתקבלת תגובה.
task.then ((snapshot) => {<br/> console.log (snapshot.downloadURL); <br/>}); - 7לתפוס את השגיאות. אפשר להיתקל במקרים של שגיאות שיהיה צורך לפתור בעיות. ניתן לטפל בכך במשימת ההעלאה בשיטת.catch () כמפורט להלן:
משימה. ואז ((תמונת מצב) => {document.querySelector ('# someImageTagID'). src = snapshot.downloadURL;}).catch ((error) => {// ניתן למצוא רשימה של שגיאות ב // https: //firebase.google.com/docs/storage/web/handle-errors מתג (error.code) {מקרה 'אחסון / לא מורשה': // למשתמש אין הרשאה לגשת להפסקת האובייקטים; אחסון מקרה '/ ביטל ': // המשתמש ביטל את הפסקת ההעלאה;... מקרה' אחסון / לא ידוע ': // אירעה שגיאה לא ידועה הפסקה;}})
במאמר זה, אנו הולכים לכתוב סקריפט העלאת קבצים AJAX כדי לדחוף קבצים לאחסון Firebase.
- הוסף משתמשים נוספים למסד הנתונים של Firebase. זה מועיל מכיוון שאין פיתרונות נוכחיים לייצוא נתוני משתמשים Auth בכמות גדולה. דרך לעקיפת הבעיה היא לשמור משתמשים במסד הנתונים של Firebase כאשר הם נרשמים בפעם הראשונה.
- ניתן לשמור את כתובת האתר להורדה של הקובץ שהועלה כפי שצוין לעיל, או לחלופין, ניתן לשמור את הפניה ל- Firebase לצורך התייחסות עתידית.
- וודא כי ההיגיון ב- Firebase נשמר בצד השרת. זה מקטין את הסיכויים לנעילת ספק ומפריד בין ההיגיון האחורי שלך לחזית.
