كيفية تحميل الصور إلى حاوية تخزين Supabase من تطبيق Next.js

لا يُنصح عمومًا بتخزين الصور في قاعدة بيانات. يمكن أن يصبح القيام بذلك مكلفًا بسرعة نظرًا لكمية التخزين وقوة المعالجة المطلوبة. يعد استخدام خدمة تخزين فعالة من حيث التكلفة وقابلة للتطوير مثل تخزين Supabase أفضل.

فيما يلي ستتعرف على كيفية تحميل الصور إلى حاوية تخزين باستخدام مكتبة عميل Supabase JavaScript وكيفية خدمة الصور في تطبيق Next.js.

إنشاء مشروع Supabase

إذا لم يكن لديك بالفعل تطبيق Next.js جاهزًا ، فاتبع المسؤول دليل بدء تشغيل Next.js لإنشاء التطبيق الخاص بك.

بمجرد القيام بذلك ، اتبع هذه الخطوات لإنشاء قاعدة بيانات Supabase:

1. انتقل إلى موقع Supabase الإلكتروني وأنشئ حسابًا جديدًا. إذا كان لديك بالفعل حساب، قم بتسجيل الدخول.
2. من لوحة معلومات Supabase ، انقر فوق أنشئ مشروعًا جديدًا زر.
3. امنح مشروعك اسمًا وانقر فوق أنشئ مشروعًا زر. بمجرد إنشاء Supabase للمشروع ، سيعيد توجيهك إلى لوحة تحكم المشروع

بعد إنشاء المشروع ، قم بإنشاء دلو تخزين.

إنشاء دلو تخزين Supabase

تسمح لك حاوية التخزين بتخزين ملفات الوسائط مثل الصور ومقاطع الفيديو. في Supabase ، يمكنك إنشاء حاوية تخزين على لوحة القيادة أو استخدام مكتبة العميل.

لاستخدام لوحة القيادة ، اتبع الخطوات التالية:

1. اذهب إلى تخزين Supabase صفحة في لوحة القيادة.
2. انقر دلو جديد وأدخل اسمًا للحاوية. يمكنك تسميتها صورًا لأنك ستخزن الصور فيها.
3. انقر إنشاء دلو.

بعد ذلك ، ستقوم بإعداد عميل Supabase في تطبيقك للتفاعل مع الحاوية.

إعداد عميل Supabase

ابدأ بتثبيت مكتبة العميل supabase-js عبر المحطة:

npm install @ supabase / supabase-js

ثم قم بإنشاء مجلد جديد باسم lib في جذر التطبيق الخاص بك أو في مجلد src إذا كنت تستخدمه. في هذا المجلد ، أضف ملفًا جديدًا باسم supabase.js واستخدم الكود التالي لتهيئة عميل Supabase.

يستورد {createClient} من"@ supabase / supabase-js"
يصدّرمقدار ثابت supabase = createClient ('', '')

استبدل عنوان URL الخاص بالمشروع والمفتاح المجهول بتفاصيلك الخاصة التي يمكنك العثور عليها في ملف إعدادات مشروع Supabase. يمكنك نسخ التفاصيل في ملف .env والرجوع إليها من هناك.

SUPABASE_PROJECT_URL = "your_project_url"
SUPABASE_PROJECT_ANON_KEY = "your_project_anon_key"

الآن ، في supabase.js ، يجب أن يكون لديك:

يصدّرمقدار ثابت supabase = createClient (
 عملية. env. SUPABASE_PROJECT_URL ،
 عملية. env. SUPABASE_ANON_KEY
);

بمجرد القيام بذلك ، قم بإنشاء نموذج يقبل الصور.

تكوين نموذج يقبل الصور

داخل مجلد تطبيق Next.js للتطبيق الخاص بك ، قم بإنشاء مجلد فرعي باسم رفع وأضف ملفًا جديدًا باسم page.js. سيؤدي هذا إلى إنشاء صفحة جديدة متاحة في / طريق التحميل. إذا كنت تستخدم Next.js 12 ، فأنشئ upload.js في ملف الصفحات مجلد.

في صفحة التحميل ، أضف الكود التالي لإنشاء النموذج.

"استخدام العميل";
يستورد {useState} من"تتفاعل";
يصدّرتقصيروظيفةصفحة() {
مقدار ثابت [file، setfile] = useState ([]) ،
مقدار ثابت مقبض غير متزامن (هـ) => {
 e.preventDefault () ؛
// تحميل الصور
 };
مقدار ثابت handleFileSelected = (ه) => {
 setfile (e.target.files [0]);
 };
يعود (


"ملف" الاسم ="صورة" onChange = {handleFileSelected} />
"يُقدِّم"> تحميل الصورة </button>
 </form>
 );
}

عند تحديد ملف والنقر فوق زر الإرسال ، يجب أن يستدعي النموذج وظيفة handleSubmit. في هذه الوظيفة ، ستقوم بتحميل الصورة.

بالنسبة للنماذج الكبيرة ذات الحقول المتعددة ، قد يكون من الأسهل القيام بذلك استخدام مكتبة النماذج مثل formik للتعامل مع المصادقة والتقديم.

تحميل ملف صورة إلى حاوية تخزين Supabase

في وظيفة handleSubmit ، استخدم عميل Supabase لتحميل الصورة عن طريق إضافة الكود أدناه.

مقدار ثابت مقبض غير متزامن (هـ) => {
 e.preventDefault () ؛
مقدار ثابت اسم الملف = `$ {uuidv4 ()}-$ {file.name}`;
مقدار ثابت {البيانات ، الخطأ} = انتظر supabase.storage
 .من("الصور")
 .upload (اسم الملف ، ملف ، {
 cacheControl: "3600",
 upert: خطأ شنيع,
 });
مقدار ثابت filepath = data.path ؛
// حفظ مسار الملف في قاعدة البيانات
 };

في هذه الوظيفة ، تقوم بإنشاء اسم ملف فريد من خلال ربط اسم الملف مع UUID الذي تم إنشاؤه بواسطة حزمة uuid npm. يوصى بذلك لتجنب الكتابة فوق الملفات التي تشترك في نفس الاسم.

ستحتاج إلى تثبيت حزمة uuid عبر npm ، لذا انسخ الأمر أدناه وقم بتشغيله في الجهاز.

npm تثبيت uuid

بعد ذلك ، في أعلى صفحة التحميل ، قم باستيراد الإصدار 4 من uuid.

يستورد {v4 مثل uuidv4} من"uuid";

إذا كنت لا تريد استخدام الحزمة uuid ، فهناك بعض الحزم الأخرى الطرق التي يمكنك استخدامها لإنشاء معرفات فريدة.

بعد ذلك ، استخدم عميل القاعدة الفوقية لتحميل الملف إلى حاوية التخزين المسماة "الصور". تذكر أن تقوم باستيراد عميل القاعدة الفوقية أعلى ملفك.

يستورد {supabase} من"@ / lib / supabase";

لاحظ أنك تقوم بتمرير المسار إلى الصورة والصورة نفسها. يعمل هذا المسار بنفس الطريقة التي يعمل بها في نظام الملفات. على سبيل المثال ، إذا كنت تقوم بحفظ الصورة في مجلد في الحاوية يسمى public ، يمكنك تحديد المسار كـ "/ public / filename".

سيعيد Supabase كائنًا يحتوي على البيانات وكائن الخطأ. يحتوي كائن البيانات على عنوان URL للصورة التي قمت بتحميلها للتو.

لكي تعمل وظيفة التحميل هذه ، يجب عليك إنشاء سياسة وصول تسمح لتطبيقك بإدراج البيانات وقراءتها في حاوية تخزين Supabase باتباع الخطوات التالية:

1. في لوحة تحكم مشروعك ، انقر فوق تخزين علامة التبويب على الشريط الجانبي الأيسر.
2. حدد حاوية التخزين الخاصة بك وانقر فوق وصول فاتورة غير مدفوعة.
3. تحت سياسات الجرافة، انقر على سياسة جديدة زر.
4. حدد ملف للتخصيص الكامل خيار لإنشاء سياسة من البداية.
5. في ال أضف سياسة في مربع الحوار ، أدخل اسمًا لسياستك (على سبيل المثال ، "السماح بالإدراج والقراءة").
6. يختار إدراج و يختار أذونات من العمليات المسموح بها القائمة المنسدلة.
7. انقر على مراجعة زر لمراجعة السياسات.
8. انقر على يحفظ زر لإضافة السياسة.

يجب أن تكون الآن قادرًا على تحميل الصور دون حدوث خطأ في الوصول.

خدمة الصور التي تم تحميلها في تطبيقك

لخدمة الصورة على موقعك ، تحتاج إلى عنوان URL عام ، يمكنك استرداده بطريقتين مختلفتين.

يمكنك استخدام عميل Supabase مثل هذا:

مقدار ثابت مسار الملف = "path_to_file_in_buckey"
مقدار ثابت {data} = supabase
 .تخزين
 .من("الصور")
 .getPublicUrl (`$ {filepath}`)

أو يمكنك ربط عنوان URL الخاص بالحاوية يدويًا بمسار الملف:

مقدار ثابت مسار الملف = `$ {bucket_url}/$ {filepath}`

استخدم الطريقة التي تفضلها. بمجرد حصولك على مسار الملف ، يمكنك استخدامه في مكون الصورة Next.js مثل هذا:

"" العرض = {200} الارتفاع = {200}/>

سيعرض هذا الرمز الصورة على موقعك.

إنشاء تطبيقات قوية باستخدام قاعدة Supabase

باستخدام هذا الرمز ، يمكنك قبول ملف من مستخدم من خلال نموذج وتحميله على تخزين Supabase. يمكنك بعد ذلك استرداد تلك الصورة وتقديمها على موقعك.

إلى جانب تخزين الصور ، لدى Supabase وظائف أخرى. يمكنك إنشاء قاعدة بيانات PostgreSQL ، وكتابة وظائف الحافة ، وإعداد المصادقة للمستخدمين.