فشل رفع الصور إلى Heroku باستخدام node

بتاريخ 1 ساعة قال Ali Shouaa:

السلام عليكم عذرا على الاطالة , فمثلا هذه دالة اضافة مستخدم جديد register  و هي لا تعمل في تعمل في الصفحة و السبب لانه يوجد اضافة صورة للمستخدم , و تأكدت من ذلك انا عندما أُضيف منشور في الصفحة من غير صورة فإنه يُنشر , و حين أضيف الصورة لا يعمل , مع انه كان يعمل عند تجربة الصفحة  localhost :8080 ... فلماذا لا تُرفع الصور و شكرا https://pagebooks.herokuapp.com/   

هذا رابط المشروع و شكرا

 

هيروكو لاتسمح برفع الصور أو غيرها من الملفات على file system .. أي نظام ملفات المخدم.

أقترح عليك استخدام خدمة S3 المقدمة من أمازون للتخزين السحابي

هل يظهر لك أي خطأ؟

• ربما المشكلة في بيانات HTTP header خطأ في الترويسة
• أو نوع الطلبية get - post 
• أو خطأ في المصادقة على المستخدم (احذف Local Storage)
• اعمل log out للمستخدم وحاول بحساب جديد

أرجو مشاركة معلومات أكثر عن المشلكة.

برجاء وضع معلومات أكثر مثل إرفاق الشفرة البرمجية بالإضافة إلى إرفاق صورة توضح عملية الرفع من خﻻل برنامج postman وبالإضافة إلى الخطأ الذي يظهر لك

ولكن بوجهٍ عام بما أنك تقوم بالرفع من postman لذا غالباً أنت تقوم بإختيار نافذة الform-data بداخل الbody ومن ثم تقوم بإختيار حقلُ وتقوم بتعيينه كملف بدلاً من قيمة نصية وتقوم بعد ذلك بإرفاق الصورة فيه

ولكن عندما تقوم برفع الصورة من المتصفح يتم إعطاءك خطأ لذا في أغلب الحالات يبدو أنك قد تكون قمت بإرسال الbody على هيئة json والjson ﻻ تدعم ترميز الملفات مما يؤدي إلى فشل العملية, لذا في هذه الحالة يمكنك أن تقوم بإرسال الbody على هيئة كائن FormData

ويعمل الكائن كالتالي 

form_data = new FormData();///لتعريف الكائن
form_data.append(key,value)//لوضع قيمة في الكائن, حيث نضع إسم الحقل وفي المعامل الثاني نضع قيمته
/*
العملية السابقة مشابهة لصيغة الjson 
{
	key:value
}
*/

ومن ثم يتم وضع الكائن في خانة معامل الbody

axios(url,formdata)

السلام عليكم عذرا على الاطالة , فمثلا هذه دالة اضافة مستخدم جديد register  و هي لا تعمل في تعمل في الصفحة و السبب لانه يوجد اضافة صورة للمستخدم , و تأكدت من ذلك انا عندما أُضيف منشور في الصفحة من غير صورة فإنه يُنشر , و حين أضيف الصورة لا يعمل , مع انه كان يعمل عند تجربة الصفحة  localhost :8080 ... فلماذا لا تُرفع الصور و شكرا

https://pagebooks.herokuapp.com/   هذا رابط المشروع و شكرا

شكرا حبيب، و لكن ams يحتاج لبطاقة مصرفية من اجل تسجيل الدخول و انا لا أملك ذلك، هل هناك حل آخر و شكرا لك

بتاريخ 1 دقيقة مضت قال Ali Shouaa:

شكرا حبيب، و لكن ams يحتاج لبطاقة مصرفية من اجل تسجيل الدخول و انا لا أملك ذلك، هل هناك حل آخر و شكرا لك

يوجد خدمات أخرى مجانية مثل خدمة frestorage المقدمة من firebase

يعطيكم العافية،  هل يوجد كورس او أحد يعلًمنا كيف نستطيع ان نرفص الصور على firebase باستخدام node js من اجل حل مشكلة هيروكو ؟؟

بتاريخ 54 دقائق مضت قال Ali Shouaa:

يعطيكم العافية،  هل يوجد كورس او أحد يعلًمنا كيف نستطيع ان نرفص الصور على firebase باستخدام node js من اجل حل مشكلة هيروكو ؟؟

يمكنك رفع الصور باستخدام react js و firebase باتباع الخطوات التالية

1. تثبيتfire base عبر الامر التالي 

   npm i firebase

    

2. استيراد الmodule(الوحدة) الخاصة بربط مشروع الفاير بيز initializeApp 

   import { initializeApp } from "firebase/app";

    

3. تثبيت كلاً من الوحدات getStorage المسؤلة عن ربط مشروعك بالمساحة التخزينية الخاصة بالفايربيز , ref المسؤلة عن الإشارة إلى المجلدات والمسارات في مساحتك التخزينية, و uploadBytes المسؤلة عن رفع الملفات إلى المساحة التخزينية 

    import {getStorage, ref, uploadBytes} from "firebase/storage";

    

4. الإعلان عن كائن الfirebaseConfig الذي يوجد به معلومات الوصول إلى مشروع الفايربيز الخاص بك ويمكنك إيجاده عبر الدخول إلى خانة الproject settings في مشروع الفايربيز الخاص بك ويكون منظره مقارب للشكل التالي 

   const firebaseConfig = {
       apiKey: "xxxxxxxxxxxxxx",
       authDomain: "xxxxxxxxxxxxx",
       databaseURL: "xxxxxxxxxxxxx",
       projectId: "xxxxxxxxxxxxxx",
       storageBucket: "xxxxxxxxxxxxxxxxxxx",
       messagingSenderId: "xxxxxxxxxxxxxxxx",
       appId: "1:618307687043:"xxxxxxxxxxxxxxx",
       measurementId: "xxxxxxxxxxx"
   };

   بالطبع مع إستبدال الx بالمعلومات السرية الخاصة بك التي ستجدها في خانة الproject settings 

5. تهيئة التطبيق عبر 

    const app = initializeApp(firebaseConfig);

    

6.  تهيئة التعامل مع المساحة التخزينية 

   const storage = getStorage(app);

    

7. تهيئة المسار للملفات 

   const imagesRef = ref(storage,"/images/")

    

8. هنيئًا لك يمكنك الأن رفع الملفات عن طريق الشفرة التالية 

   uploadBytes(imagesRef, image)
     .then(snapshot=>getDownloadURL(snapshot.ref)
           .then(async(url)=>callback)

   المتغير image يجب أن يحمل الصورة التي يقوم المستخدم برفعها , وبمجرد كتابة السطر الاول

   uploadBytes(imageRef,image)

   يكون قد تم رفع الصورة, وبالنسبة للدالة getDownloadURL فهي مسؤلة عن جلب الرابط الخاص بتحميل الصورة حتى تقوم برفقها في قاعدة البيانات لتستطيع عرضها للمستخدم بعد ذلك, ولأن تلك الدالة هي دالة async يتم بعدها كتابة .then ومن ثم تقوم بكتابة الإجراء المُراد إتخاذه مع رابط التحميل(مثل إرساله للnode js api مثلًا بغرض إرفاقه في قاعدة البيانات)

بالتوفيق

بتاريخ 14 ساعات قال شرف الدين2:

يمكنك رفع الصور باستخدام react js و firebase باتباع الخطوات التالية

1. تثبيتfire base عبر الامر التالي 

   
   npm i firebase

    

2. استيراد الmodule(الوحدة) الخاصة بربط مشروع الفاير بيز initializeApp 

   
   import { initializeApp } from "firebase/app";

    

3. تثبيت كلاً من الوحدات getStorage المسؤلة عن ربط مشروعك بالمساحة التخزينية الخاصة بالفايربيز , ref المسؤلة عن الإشارة إلى المجلدات والمسارات في مساحتك التخزينية, و uploadBytes المسؤلة عن رفع الملفات إلى المساحة التخزينية 

   
    import {getStorage, ref, uploadBytes} from "firebase/storage";

    

4. الإعلان عن كائن الfirebaseConfig الذي يوجد به معلومات الوصول إلى مشروع الفايربيز الخاص بك ويمكنك إيجاده عبر الدخول إلى خانة الproject settings في مشروع الفايربيز الخاص بك ويكون منظره مقارب للشكل التالي 

   
   const firebaseConfig = {
       apiKey: "xxxxxxxxxxxxxx",
       authDomain: "xxxxxxxxxxxxx",
       databaseURL: "xxxxxxxxxxxxx",
       projectId: "xxxxxxxxxxxxxx",
       storageBucket: "xxxxxxxxxxxxxxxxxxx",
       messagingSenderId: "xxxxxxxxxxxxxxxx",
       appId: "1:618307687043:"xxxxxxxxxxxxxxx",
       measurementId: "xxxxxxxxxxx"
   };

   بالطبع مع إستبدال الx بالمعلومات السرية الخاصة بك التي ستجدها في خانة الproject settings 

5. تهيئة التطبيق عبر 

   
    const app = initializeApp(firebaseConfig);

    

6.  تهيئة التعامل مع المساحة التخزينية 

   
   const storage = getStorage(app);

    

7. تهيئة المسار للملفات 

   
   const imagesRef = ref(storage,"/images/")

    

8. هنيئًا لك يمكنك الأن رفع الملفات عن طريق الشفرة التالية 

   
   uploadBytes(imagesRef, image)
     .then(snapshot=>getDownloadURL(snapshot.ref)
           .then(async(url)=>callback)

   المتغير image يجب أن يحمل الصورة التي يقوم المستخدم برفعها , وبمجرد كتابة السطر الاول

   
   uploadBytes(imageRef,image)

   يكون قد تم رفع الصورة, وبالنسبة للدالة getDownloadURL فهي مسؤلة عن جلب الرابط الخاص بتحميل الصورة حتى تقوم برفقها في قاعدة البيانات لتستطيع عرضها للمستخدم بعد ذلك, ولأن تلك الدالة هي دالة async يتم بعدها كتابة .then ومن ثم تقوم بكتابة الإجراء المُراد إتخاذه مع رابط التحميل(مثل إرساله للnode js api مثلًا بغرض إرفاقه في قاعدة البيانات)

بالتوفيقا

شكرا لك يا حبيب فعلت ذلك و لكن يوجد خطأ ربما في كتابتي او انني لم أفهم كثيرا الأمر

هذه الصفحة التي أجرب من خلالها و شكرا لك

firebase.zip

عند تجربة الامر من postman  يظهر خطأ