يوفر تخزين Firebase طريقة بسيطة لتخزين البيانات التي ينشئها المستخدم مثل الصور ومقاطع الفيديو والملفات الصوتية. يتكامل مع مصادقة Firebase ، بحيث يمكنك التحكم في من يمكنه الوصول إلى الملفات.
يمكنك تخزين كميات كبيرة من المحتوى باستخدام Firebase نظرًا لأنه يتوسع تلقائيًا ليلائم احتياجاتك. من السهل استخدامه مع إطار عمل تابع لجهة خارجية مثل مكتبة React JavaScript
إعداد مشروع
لتحميل الملفات إلى تخزين Firebase، تحتاج إلى إنشاء نموذج ويب يسمح للمستخدمين بتحديد ملف من نظام الملفات.
ابدأ ب إنشاء تطبيق React باستخدام تطبيق create-react-app. قم بتشغيل هذا الأمر لإنشاء مشروع React يسمى فايربيس تحميل:
npx خلقرد فعل تطبيق firebase-upload
لتبسيط الأمر ، ما عليك سوى زر إدخال يقبل الملفات وزر تحميل. استبدل محتويات App.js مع الكود التالي.
يستورد {useState} من عند "تتفاعل"وظيفةبرنامج() {
const [file، setFile] = useState ("");// مقابض الإدخال يتغيرونحدثو حالة التحديثات
وظيفةالتعامل مع التغيير(حدث) {
تعيين الملف(حدث.هدف.files[0]);
}إرجاع (
<شعبة>
<نوع الإدخال ="ملف" قبول ="صورة/*" onChange = {handleChange} />
<زر>تحميل إلى Firebase</button>
</div>
);
}
يصدّرإفتراضي برنامج؛
في الكود أعلاه ، فإن ملف إدخال العلامة قبول تم تعيين السمة للسماح فقط بالصور. ال التعامل مع التغيير() تتعامل الوظيفة مع تغيير الإدخال وتقوم بتحديث الحالة لتخزين الملف المختار.
قم بإعداد Firebase
قبل تحميل الملف على تخزين Firebase ، تحتاج إلى إنشاء مشروع Firebase.
أنشئ مشروع Firebase
اتبع الإرشادات أدناه لإنشاء مشروع Firebase:
- اذهب إلى Firebase صفحة وحدة التحكم وانقر فوق اضافة مشروع أو أنشئ مشروعًا (إذا كنت تقوم بإنشاء مشروع لأول مرة).
- امنح مشروعك اسمًا من اختيارك وانقر يكمل.
- قم بإلغاء تحديد Google Analytics لأنك لست بحاجة إليه لهذا المشروع وانقر أنشئ مشروعًا.
- انقر يكمل بمجرد أن يصبح المشروع جاهزًا.
- اضغط على رمز الويب في صفحة نظرة عامة على المشروع لتسجيل تطبيق ويب.
- امنح تطبيقك لقبًا وانقر يسجل.
- انسخ كائن التكوين المقدم. ستحتاج إليه لتوصيل تطبيقك بـ Firebase.
قم بإنشاء حاوية تخزين سحابي
يخزن Firebase الملفات في حاوية تخزين سحابية. اتبع الخطوات التالية لإنشائه:
- في صفحة نظرة عامة على المشروع ، انقر فوق تخزين علامة التبويب في لوحة التنقل اليسرى.
- انقر البدء واختر وضع الاختبار.
- حدد موقع حاوية التخزين الافتراضي وانقر فوق منتهي.
أنت الآن جاهز لبدء تحميل الملفات على مساحة تخزين Firebase.
أضف Firebase إلى React
في جهازك الطرفي ، انتقل إلى مجلد مشروع React. قم بتشغيل الأمر التالي لتثبيت Firebase SDK:
npm التثبت فايربيس
قم بإنشاء ملف جديد ، firebaseConfig.js، وتهيئة Firebase.
يستورد {initializeApp} من عند "Firebase / التطبيق" ؛
يستورد {getStorage} من عند "Firebase / التخزين" ؛// تهيئة Firebase
مقدار ثابت التطبيق = initializeApp ({
مفتاح API: <مفتاح API>,
نطاق التأليف: <نطاق التأليف>,
معرف المشروع: <معرف المشروع>,
التخزين <التخزين>,
المراسلة <المراسلة>,
معرف التطبيق: <معرف التطبيق>,
معرف القياس: <معرف القياس>,
});
// مرجع تخزين Firebase
مقدار ثابت التخزين = getStorage (التطبيق) ؛
يصدّرإفتراضي تخزين؛
استخدم كائن التكوين الذي حصلت عليه بعد إنشاء مشروع Firebase لتهيئة تطبيق Firebase.
يقوم السطر الأخير بتصدير مرجع تخزين Firebase حتى تتمكن من الوصول إلى هذا المثيل من بقية تطبيقك.
قم بإنشاء وظيفة معالج لتحميل الصور إلى Firebase
سيؤدي النقر فوق زر التحميل إلى تشغيل الوظيفة المسؤولة عن تحميل الملف إلى تخزين Firebase. دعونا ننشئ هذه الوظيفة.
في App.js، أضف الوظيفة مقبض. في الوظيفة ، تحقق مما إذا كان الملف غير فارغ حيث قد ينقر المستخدم على زر التحميل قبل اختيار الملف. إذا كان الملف غير موجود ، فأطلق تنبيهًا يخبر المستخدم بتحميل ملف أولاً.
وظيفةمقبض() {
إذا (! ملف) {
إنذار("الرجاء اختيار ملف أولا!")
}
}
إذا كان الملف موجودًا ، فقم بإنشاء مرجع تخزين. يعمل مرجع التخزين كمؤشر للملف في السحابة الذي تريد العمل عليه.
ابدأ باستيراد خدمة التخزين التي أنشأتها في ملف firebaseConfig.js ملف.
يستورد تخزين من عند "./firebaseConfig.js"
يستورد المرجع من مثيل تخزين Firebase وتمرير خدمة التخزين ومسار الملف كوسيطة.
يستورد {المرجع} من عند "firebase / التخزين"وظيفةمقبض() {
إذا (! ملف) {
إنذار("الرجاء اختيار ملف أولا!")
}
مقدار ثابت storageRef = المرجع (التخزين ، `/ ملفات /$ {file.name}`)
}
بعد ذلك ، أنشئ مهمة تحميل عن طريق تمرير نسخة تخزين Firebase إلى ملف uploadBytesResumable () وظيفة. هناك عدة طرق يمكنك استخدامها ، ولكن هذه الطريقة تحديدًا تسمح لك بإيقاف التحميل مؤقتًا واستئنافه. كما يعرض تحديثات التقدم.
ال uploadBytesResumable () تقبل الوظيفة مرجع التخزين والملف المراد تحميله.
يستورد {
المرجع ،
uploadBytesResumable
} من عند "Firebase / التخزين" ؛وظيفةمقبض() {
لو (!ملف) {
تنبيه ("الرجاء اختيار ملف أولاً!")
}
مقدار ثابت storageRef = المرجع (التخزين ، `/ ملفات /$ {file.name}`)
مقدار ثابت uploadTask = uploadBytesResumable (storageRef، file) ،
}
لمراقبة التقدم ومعالجة الأخطاء أثناء تحميل الملف ، استمع إلى تغييرات الحالة والأخطاء والإكمال.
يستورد {
المرجع ،
UploadBytes قابل للاسترداد ،
getDownloadURL
} من عند "Firebase / التخزين";وظيفةمقبض() {
إذا (! ملف) {
إنذار("الرجاء اختيار ملف أولا!")
}مقدار ثابت storageRef = المرجع (التخزين ،`/ ملفات /$ {file.name}`)
مقدار ثابت uploadTask = uploadBytesResumable (storageRef، file) ،تحميل مهمة.تشغيل(
"تغيير الدولة",
(لقطة) => {
مقدار ثابت في المئة = رياضيات.مستدير(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
// كم لم ترسلها
setPercent (بالمائة) ؛
},
(يخطئ) => وحدة التحكم.log (يخطئ) ،
() => {
// تحميل رابط
getDownloadURL (uploadTask.snapshot.ref). ثم ((url) => {
وحدة التحكم.log (url) ؛
});
}
);
}
هنا ، تغيير الدولة الحدث لديه ثلاث وظائف رد الاتصال. في الوظيفة الأولى ، أنت تتابع تقدم التحميل وتحميل حالة التقدم. في وظيفة رد الاتصال الثانية ، تعامل مع خطأ إذا لم ينجح التحميل.
تعمل الوظيفة النهائية بمجرد اكتمال التحميل ، وتحصل على عنوان URL للتنزيل ، ثم تعرضه على وحدة التحكم. في تطبيق واقعي ، يمكنك حفظه في قاعدة بيانات.
يمكنك عرض حالة تقدم التحميل باستخدام حالة النسبة المئوية. أضف أيضًا ملف عند النقر على زر التحميل لتشغيل ملف مقبض وظيفة.
يستورد {useState} من عند "تتفاعل"؛وظيفةبرنامج() {
مقدار ثابت [النسبة المئوية ، setPercent] = useState (0);
إرجاع (
<شعبة>
<نوع الإدخال ="ملف" onChange = {handleChange} قبول ="" />
<زر onClick = {handleUpload}>تحميل إلى Firebase</button>
<ص>{نسبه مئويه} "٪ انتهى"</ ص>
</div>
)
}
إليك الكود الكامل لـ App.js:
يستورد {useState} من عند "تتفاعل"؛
يستورد { تخزين } من عند "./firebaseConfig" ؛
يستورد {ref، uploadBytesResumable، getDownloadURL} من عند "Firebase / التخزين" ؛وظيفةبرنامج() {
// الدولة لتخزين الملف الذي تم تحميله
const [file، setFile] = useState ("");// تقدم
مقدار ثابت [النسبة المئوية ، setPercent] = useState (0);// معالجة حدث تحميل الملف وحالة التحديث
وظيفةالتعامل مع التغيير(حدث) {
تعيين الملف(حدث.هدف.files[0]);
}مقدار ثابت handleUpload = () => {
إذا (! ملف) {
إنذار("الرجاء تحميل الصورة أولا!");
}مقدار ثابت storageRef = المرجع (التخزين ، `/ ملفات /$ {file.name}`);
// يمكن إيقاف التقدم واستئنافه. كما يعرض تحديثات التقدم.
// يتلقى مرجع التخزين والملف المراد تحميله.
مقدار ثابت uploadTask = uploadBytesResumable (storageRef، file) ،تحميل مهمة.تشغيل(
"تغيير الدولة",
(لقطة) => {
مقدار ثابت في المئة = رياضيات.مستدير(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);// كم لم ترسلها
setPercent (بالمائة) ؛
},
(يخطئ) => وحدة التحكم.log (يخطئ) ،
() => {
// تحميل رابط
getDownloadURL (uploadTask.snapshot.ref). ثم ((url) => {
وحدة التحكم.log (url) ؛
});
}
);
};إرجاع (
<شعبة>
<نوع الإدخال ="ملف" onChange = {handleChange} قبول ="/image/*" />
<زر onClick = {handleUpload}>تحميل إلى Firebase</button>
<ص>{نسبه مئويه} "٪ انتهى"</ ص>
</div>
);
}
يصدّرإفتراضي برنامج؛
فعل المزيد مع تخزين Firebase
يعد تحميل الملفات أحد أهم الميزات الأساسية لتخزين Firebase. ومع ذلك ، هناك أشياء أخرى يتيح لك تخزين Firebase القيام بها. يمكنك الوصول إلى ملفاتك وعرضها وتنظيمها وحذفها.
في تطبيق أكثر تعقيدًا ، قد ترغب في مصادقة المستخدمين لمنحهم الإذن بالتفاعل مع ملفاتهم فقط.
مصادقة المستخدمين باستخدام Firebase & React
اقرأ التالي
مواضيع ذات صلة
- برمجة
- تتفاعل
- قاعدة البيانات
- تطوير الشبكة
نبذة عن الكاتب
ماري جاثوني هي مطورة برامج لديها شغف لإنشاء محتوى تقني ليس إعلاميًا فحسب ، بل جذابًا أيضًا. عندما لا تقوم بالبرمجة أو الكتابة ، فإنها تستمتع بالتسكع مع الأصدقاء والتواجد في الهواء الطلق.
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك
