אחסון Firebase מספק דרך פשוטה לאחסון נתונים שנוצרו על ידי משתמשים כמו תמונות, סרטונים וקובצי אודיו. זה משתלב עם אימות Firebase, כך שתוכל לשלוט למי יש גישה לקבצים.

אתה יכול לאחסן כמויות גדולות של תוכן באמצעות Firebase מכיוון שהוא משתנה באופן אוטומטי כדי להתאים לצרכים שלך. זה פשוט לשימוש עם מסגרת של צד שלישי כמו ספריית React JavaScript

הגדרת פרויקט

להעלאת קבצים אחסון Firebase, עליך ליצור טופס אינטרנט המאפשר למשתמשים לבחור קובץ ממערכת הקבצים.

התחל ב יצירת אפליקציית React באמצעות אפליקציית create-react. הפעל פקודה זו כדי ליצור פרויקט React בשם העלאת firebase:

npx לִיצוֹר-react-app firebase-upload

כדי לשמור את זה פשוט, אתה צריך רק כפתור קלט שמקבל קבצים וכפתור העלאה. החלף את התוכן של App.js עם הקוד הבא.

יְבוּא {useState} מ "לְהָגִיב"
פוּנקצִיָהאפליקציה() {
 const [קובץ, setFile] = useState("");


// מטפל בקלט שינוימִקרֶהו מצב עדכונים
פוּנקצִיָהhandleChange(מִקרֶה) {
setFile(מִקרֶה.יַעַד.קבצים[0]);
 }


לַחֲזוֹר (
<div>
<סוג קלט="קוֹבֶץ" לקבל="תמונה/*" onChange={handleChange}/>
<לַחְצָן>העלה ל-Firebase</button>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;
instagram viewer

בקוד לעיל, ה קֶלֶט של תג לְקַבֵּל התכונה מוגדרת לאפשר רק תמונות. ה handleChange() הפונקציה מטפלת בשינוי הקלט ומעדכנת את המצב כדי לאחסן את הקובץ שנבחר.

הגדר את Firebase

לפני העלאת הקובץ לאחסון Firebase, עליך ליצור פרויקט Firebase.

צור פרויקט Firebase

בצע את ההוראות הבאות כדי ליצור פרויקט Firebase:

  1. לך אל Firebase דף המסוף ולחץ על הוסף פרויקט אוֹ צור פרויקט (אם אתה יוצר פרויקט בפעם הראשונה).
  2. תן לפרויקט שלך שם לבחירתך ולחץ לְהַמשִׁיך.
  3. בטל את הבחירה ב-Google Analytics מכיוון שאינך זקוק לו עבור הפרויקט הזה ולחץ צור פרויקט.
  4. נְקִישָׁה לְהַמשִׁיך ברגע שהפרויקט יהיה מוכן.
  5. הקלק על ה סמל אינטרנט בדף סקירת הפרויקט כדי לרשום אפליקציית אינטרנט.
  6. תן לאפליקציה שלך כינוי ולחץ להירשם.
  7. העתק את אובייקט התצורה שסופק. תזדקק לו כדי לחבר את האפליקציה שלך ל-Firebase.

צור דלי אחסון בענן

Firebase מאחסן קבצים בדלי אחסון בענן. בצע את השלבים הבאים כדי ליצור אותו:

  1. בדף סקירת הפרויקט, לחץ על אִחסוּן לשונית בחלונית הניווט השמאלית.
  2. נְקִישָׁה להתחיל ובחר מצב מבחן.
  3. בחר את מיקום ברירת המחדל של דלי האחסון ולחץ בוצע.

כעת אתה מוכן להתחיל להעלות קבצים לאחסון Firebase.

הוסף את Firebase ל-React

במסוף שלך, נווט אל תיקיית פרויקט React שלך. הפעל את הפקודה הבאה כדי להתקין את Firebase SDK:

npm להתקין בסיס אש

צור קובץ חדש, firebaseConfig.js, ואתחול Firebase.

יְבוּא { initializeApp } מ "firebase/app";
יְבוּא { getStorage } מ "בסיס אש/אחסון";
// אתחול Firebase
const app = initializeApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 מזהה פרויקט: <מזהה פרויקט>,
 דלי אחסון: <דלי אחסון>,
 messagingSenderId: <messagingSenderId>,
 appId: <appId>,
 measurementId: <measurementId>,
});
// הפניה לאחסון Firebase
const אחסון = getStorage (אפליקציה);
יְצוּאבְּרִירַת מֶחדָל אִחסוּן;

השתמש באובייקט התצורה שקיבלת לאחר יצירת פרויקט Firebase כדי לאתחל את אפליקציית Firebase.

השורה האחרונה מייצאת את הפניה לאחסון Firebase כדי שתוכל לגשת למופע הזה משאר האפליקציה שלך.

צור פונקציית Handler כדי להעלות את התמונות ל-Firebase

לחיצה על כפתור ההעלאה אמורה להפעיל את הפונקציה האחראית להעלאת הקובץ לאחסון Firebase. בואו ניצור את הפונקציה הזו.

ב App.js, הוסף את הפונקציה handleUpload. בפונקציה, בדוק אם הקובץ אינו ריק מכיוון שמשתמש עלול ללחוץ על כפתור ההעלאה לפני בחירת קובץ. אם הקובץ לא קיים, העלה התראה שאומרת למשתמש להעלות קובץ תחילה.

פוּנקצִיָהhandleUpload() {
 if (!file) {
 עֵרָנִי("אנא בחר קובץ תחילה!")
 }
}

אם הקובץ קיים, צור הפניה לאחסון. הפניה לאחסון פועלת כמצביע לקובץ בענן שבו ברצונך לפעול.

התחל בייבוא ​​שירות האחסון שיצרת ב- firebaseConfig.js קוֹבֶץ.

יְבוּא אִחסוּן מ "./firebaseConfig.js"

יְבוּא ref ממופע האחסון של Firebase ולהעביר את שירות האחסון ואת נתיב הקובץ כארגומנט.

יְבוּא {ref} מ "בסיס אש/אחסון"
פוּנקצִיָהhandleUpload() {
 if (!file) {
 עֵרָנִי("אנא בחר קובץ תחילה!")
 }
const storageRef = ref (אחסון, `/קבצים/${file.name}`)
}

לאחר מכן, צור משימת העלאה על ידי העברת מופע האחסון של Firebase ל- uploadBytesResumable() פוּנקצִיָה. ישנן מספר שיטות שבהן אתה יכול להשתמש, אך זו הספציפית מאפשרת לך להשהות ולחדש העלאה. זה גם חושף עדכוני התקדמות.

ה uploadBytesResumable() הפונקציה מקבלת את הפניה לאחסון ואת הקובץ להעלאה.

יְבוּא {
 שופט,
 uploadBytesResumable 
} מ "בסיס אש/אחסון";
פוּנקצִיָהhandleUpload() {
אם (!file) {
 alert ("אנא בחר קובץ קודם!")
 }
const storageRef = ref (אחסון, `/קבצים/${file.name}`)
const uploadTask = uploadBytesResumable (storageRef, file);
}

כדי לעקוב אחר ההתקדמות ולטפל בשגיאות בזמן העלאת הקובץ, האזן לשינויי מצב, שגיאות והשלמה.

יְבוּא {
 שופט,
 uploadBytesResumable,
 getDownloadURL 
} מ "בסיס אש/אחסון";
פוּנקצִיָהhandleUpload() {
 if (!file) {
 עֵרָנִי("אנא בחר קובץ תחילה!")
 }


const storageRef = ref (אחסון,`/קבצים/${file.name}`)
const uploadTask = uploadBytesResumable (storageRef, file);


העלאת משימה.עַל(
"מצב_שונה",
 (תמונה) => {
const אחוז = מתמטיקה.עָגוֹל(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// התקדמות העדכון
 setPercent (אחוזים);
 },
 (שגיאה) => לְנַחֵם.log (שגיאה),
 () => {
// כתובת אתר להורדה
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
לְנַחֵם.log (כתובת אתר);
 });
 }
 ); 
}

הנה ה מצב_שונה לאירוע יש שלוש פונקציות התקשרות חוזרת. בפונקציה הראשונה, אתה עוקב אחר התקדמות ההעלאה ומעלה את מצב ההתקדמות. בפונקציית ההתקשרות חזרה, טפל בשגיאה אם ​​ההעלאה לא הצליחה.

הפונקציה הסופית פועלת לאחר השלמת ההעלאה, ומקבלת את כתובת האתר להורדה, ולאחר מכן מציגה אותה במסוף. ביישום אמיתי, אתה יכול לשמור אותו במסד נתונים.

אתה יכול להציג את מצב ההתקדמות של ההעלאה באמצעות מצב האחוזים. הוסף גם an בלחיצה אירוע בלחצן ההעלאה כדי להפעיל את handleUpload פוּנקצִיָה.

יְבוּא { useState } מ "לְהָגִיב";
פוּנקצִיָהאפליקציה() {
const [percent, setPercent] = useState(0);
לַחֲזוֹר (
<div>
<סוג קלט="קוֹבֶץ" onChange={handleChange} קבל="" />
<button onClick={handleUpload}>העלה ל-Firebase</button>
<ע>{אָחוּז} "% בוצע"</p>
</div>
 )
}

הנה הקוד המלא עבור App.js:

יְבוּא { useState } מ "לְהָגִיב";
יְבוּא { אחסון } מ "./firebaseConfig";
יְבוּא { ref, uploadBytesResumable, getDownloadURL } מ "בסיס אש/אחסון";
פוּנקצִיָהאפליקציה() {
// מצב לאחסן את הקובץ שהועלה
 const [קובץ, setFile] = useState("");


// התקדמות
const [percent, setPercent] = useState(0);


// טיפול באירוע העלאת קובץ ובמצב עדכון
פוּנקצִיָהhandleChange(מִקרֶה) {
setFile(מִקרֶה.יַעַד.קבצים[0]);
 }


const handleUpload = () => {
 if (!file) {
 עֵרָנִי("נא להעלות תמונה קודם!");
 }


const storageRef = ref (אחסון, `/קבצים/${file.name}`);


// ניתן להשהות ולהמשיך את ההתקדמות. זה גם חושף עדכוני התקדמות.
// מקבל את הפניה לאחסון ואת הקובץ להעלאה.
const uploadTask = uploadBytesResumable (storageRef, file);


העלאת משימה.עַל(
"מצב_שונה",
 (תמונה) => {
const אחוז = מתמטיקה.עָגוֹל(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );


// התקדמות העדכון
 setPercent (אחוזים);
 },
 (שגיאה) => לְנַחֵם.log (שגיאה),
 () => {
// כתובת אתר להורדה
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
לְנַחֵם.log (כתובת אתר);
 });
 }
 );
 };


לַחֲזוֹר (
<div>
<סוג קלט="קוֹבֶץ" onChange={handleChange} קבל="/image/*" />
<button onClick={handleUpload}>העלה ל-Firebase</button>
<ע>{אָחוּז} "% בוצע"</p>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

לעשות יותר עם Firebase Storage

העלאת קבצים היא אחת התכונות הבסיסיות ביותר של אחסון Firebase. עם זאת, ישנם דברים אחרים שאחסון Firebase מאפשר לך לעשות. אתה יכול לגשת, להציג, לארגן ולמחוק את הקבצים שלך.

באפליקציה מסובכת יותר, אולי תרצה לאמת משתמשים כדי לתת להם הרשאה לקיים אינטראקציה רק ​​עם הקבצים שלהם.

אימות משתמשים באמצעות Firebase & React

קרא הבא

לַחֲלוֹקצִיוּץלַחֲלוֹקאימייל

נושאים קשורים

  • תִכנוּת
  • לְהָגִיב
  • מאגר מידע
  • בניית אתרים

על הסופר

מרי גאתוני (20 מאמרים שפורסמו)

מרי גאתוני היא מפתחת תוכנה עם תשוקה ליצור תוכן טכני שהוא לא רק אינפורמטיבי אלא גם מרתק. כשהיא לא מקודדת או כותבת, היא נהנית לבלות עם חברים ולהיות בחוץ.

עוד ממרי גאתוני

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים טכניים, ביקורות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחץ כאן כדי להירשם