כיצד להעלות תמונות לדלי אחסון של 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 התקן את @supabase/supabase-js

לאחר מכן צור תיקיה חדשה בשם lib בשורש היישום שלך או בתיקיית src אם אתה משתמש בה. בתיקייה זו, הוסף קובץ חדש בשם supabase.js והשתמש בקוד הבא כדי לאתחל את הלקוח Supabase.

יְבוּא { createClient } מ'@supabase/supabase-js'
יְצוּאconst supabase = createClient('', '')

החלף את כתובת ה-URL של הפרויקט ואת מפתח האנון בפרטים משלך שתוכל למצוא ב- הגדרות פרויקט Supabase. אתה יכול להעתיק את הפרטים בקובץ .env ולהפנות אליהם משם.

SUPABASE_PROJECT_URL="כתובת האתר_הפרויקט שלך"
SUPABASE_PROJECT_ANON_KEY="מפתח_הפרויקט_אנון_שלך"

כעת, ב-supabase.js, אמור להיות לך:

יְצוּאconst supabase = createClient(
 process.env. SUPABASE_PROJECT_URL,
 process.env. SUPABASE_ANON_KEY
);

לאחר שעשית זאת, צור טופס שיקבל את התמונות.

יצירת טופס שמקבל תמונות

בְּתוֹך תיקיית האפליקציה Next.js של היישום שלך, צור תיקיית משנה בשם להעלות והוסף קובץ חדש בשם page.js. פעולה זו תיצור דף חדש זמין במסלול /העלה. אם אתה משתמש ב-Next.js 12, צור upload.js ב- דפים תיקייה.

בדף ההעלאה, הוסף את הקוד הבא, כדי ליצור את הטופס.

"השתמש בלקוח";
יְבוּא { useState } מ"לְהָגִיב";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהעמוד() {
const [קובץ, setfile] = useState([]);
const handleSubmit = אסינכרון (ה) => {
 e.preventDefault();
// העלאת תמונה
 };
const handleFileSelected = (ה) => {
 setfile (e.target.files[0]);
 };
לַחֲזוֹר (


"קוֹבֶץ" שם="תמונה" onChange={handleFileSelected} />
"שלח">העלה תמונה</button>
 </form>
 );
}

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

עבור טפסים גדולים עם שדות מרובים, זה יכול להיות קל יותר השתמש בספריית טפסים כמו formik לטפל באימות והגשה.

העלאת קובץ תמונה לדלי אחסון של Supabase

בפונקציה handleSubmit, השתמש בלקוח Supabase כדי להעלות את התמונה על ידי הוספת הקוד למטה.

const handleSubmit = אסינכרון (ה) => {
 e.preventDefault();
const שם הקובץ = `${uuidv4()}-${file.name}`;
const { נתונים, שגיאה } = לְהַמתִין supabase.storage
 .מ("תמונות")
 ‎.upload (שם קובץ, קובץ, {
 cacheControl: "3600",
 להרגיז: שֶׁקֶר,
 });
const filepath = data.path;
// שמור את נתיב הקובץ במסד הנתונים
 };

בפונקציה זו, אתה יוצר שם קובץ ייחודי על ידי שרשור שם הקובץ ו-UUID שנוצר על ידי החבילה uuid npm. זה מומלץ כדי להימנע מהחלפת קבצים בעלי אותו שם.

תצטרך להתקין את חבילת uuid דרך npm אז העתק והרץ את הפקודה למטה בטרמינל.

npm להתקין uuid

לאחר מכן, בחלק העליון של דף ההעלאה, ייבא את גרסה 4 של uuid.

יְבוּא { v4 כפי ש uuidv4 } מ"uuid";

אם אינך רוצה להשתמש בחבילת uuid, יש עוד כמה שיטות שבהן תוכל להשתמש כדי ליצור מזהים ייחודיים.

לאחר מכן, השתמש בלקוח supabase כדי להעלות את הקובץ לדלי האחסון הנקרא "תמונות". זכור לייבא את לקוח supabase בחלק העליון של הקובץ שלך.

יְבוּא { supabase } מ"@/lib/supabase";

שימו לב שאתם מעבירים את השביל לתמונה ואת התמונה עצמה. נתיב זה פועל כמו שהוא פועל במערכת הקבצים. לדוגמה, אם היית שומר את התמונה בתיקייה בדלי שנקראת public, היית מציין את הנתיב בתור "/public/filename".

Supabase יחזיר אובייקט המכיל את אובייקט הנתונים והשגיאה. אובייקט הנתונים מכיל את כתובת האתר לתמונה שהעלית זה עתה.

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

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

כעת אתה אמור להיות מסוגל להעלות תמונות מבלי להעלות שגיאת גישה.

הגשת התמונות שהועלו באפליקציה שלך

כדי להציג את התמונה באתר שלך, אתה צריך כתובת אתר ציבורית, אותה תוכל לאחזר בשתי דרכים שונות.

אתה יכול להשתמש בלקוח Supabase כך:

const filepath = "נתיב_לקובץ_בתוך_באקי"
const { נתונים } = supabase
 .אִחסוּן
 .מ('תמונות')
 .getPublicUrl(`${filepath}`)

או שאתה יכול לשרשר ידנית את כתובת האתר של הדלי עם נתיב הקובץ:

const filepath = `${bucket_url}/${filepath}`

השתמש בכל שיטה שאתה מעדיף. ברגע שיש לך את נתיב הקובץ, תוכל להשתמש בו ברכיב התמונה Next.js כך:

"" רוחב={200} גובה={200}/>

קוד זה יציג את התמונה באתר שלך.

יצירת יישומים חזקים עם Supabase

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

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