Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Η αποθήκευση εικόνων σε μια βάση δεδομένων γενικά δεν συνιστάται. Κάτι τέτοιο μπορεί να γίνει γρήγορα δαπανηρό λόγω της απαιτούμενης ισχύος αποθήκευσης και επεξεργασίας. Η χρήση μιας οικονομικά αποδοτικής και επεκτάσιμης υπηρεσίας αποθήκευσης όπως η αποθήκευση Supabase είναι καλύτερη.

Παρακάτω θα μάθετε πώς να ανεβάζετε εικόνες σε έναν κάδο αποθήκευσης χρησιμοποιώντας τη βιβλιοθήκη πελάτη JavaScript Supabase και πώς να προβάλλετε τις εικόνες σε μια εφαρμογή Next.js.

Δημιουργία ενός έργου Supabase

Εάν δεν έχετε ήδη έτοιμη μια εφαρμογή Next.js, ακολουθήστε την επίσημη Οδηγός έναρξης Next.js για να δημιουργήσετε την αίτησή σας.

Αφού το κάνετε αυτό, ακολουθήστε αυτά τα βήματα για να δημιουργήσετε μια βάση δεδομένων Supabase:

  1. Μεταβείτε στον ιστότοπο του Supabase και δημιουργήστε έναν νέο λογαριασμό. Εάν έχετε ήδη λογαριασμό, συνδεθείτε.
    2. instagram viewer
  2. Από τον πίνακα ελέγχου του Supabase, κάντε κλικ στο Δημιουργήστε ένα νέο έργο κουμπί.
  3. Δώστε ένα όνομα στο έργο σας και κάντε κλικ στο Δημιουργία έργου κουμπί. Μόλις το Supabase δημιουργήσει το έργο, θα σας ανακατευθύνει στον πίνακα ελέγχου του έργου

Αφού δημιουργήσετε το έργο, δημιουργήστε έναν κάδο αποθήκευσης.

Δημιουργία ενός κάδου αποθήκευσης Supabase

Ένας κάδος αποθήκευσης σάς επιτρέπει να αποθηκεύετε αρχεία πολυμέσων όπως εικόνες και βίντεο. Στο Supabase, μπορείτε να δημιουργήσετε έναν κάδο αποθήκευσης στον πίνακα εργαλείων ή να χρησιμοποιήσετε τη βιβλιοθήκη πελάτη.

Για να χρησιμοποιήσετε τον πίνακα ελέγχου, ακολουθήστε τα εξής βήματα:

  1. μεταβείτε στο Αποθήκευση Supabase σελίδα στον Πίνακα ελέγχου.
  2. Κάντε κλικ Νέος κάδος και πληκτρολογήστε ένα όνομα για τον κάδο. Μπορείτε να το ονομάσετε εικόνες αφού θα αποθηκεύετε εικόνες σε αυτό.
  3. Κάντε κλικ Δημιουργία κάδου.

Στη συνέχεια, θα ρυθμίσετε έναν πελάτη Supabase στην εφαρμογή σας για αλληλεπίδραση με τον κάδο.

Ρύθμιση του πελάτη Supabase

Ξεκινήστε εγκαθιστώντας τη βιβλιοθήκη πελάτη supabase-js μέσω του τερματικού:

npm εγκατάσταση @supabase/supabase-js

Στη συνέχεια, δημιουργήστε έναν νέο φάκελο με το όνομα lib στη ρίζα της εφαρμογής σας ή στο φάκελο src εάν τον χρησιμοποιείτε. Σε αυτόν τον φάκελο, προσθέστε ένα νέο αρχείο με το όνομα supabase.js και χρησιμοποιήστε τον ακόλουθο κώδικα για να αρχικοποιήσετε τον πελάτη Supabase.

εισαγωγή {createClient } από'@supbase/supbase-js'
εξαγωγήσυνθ supabase = createClient('', '')

Αντικαταστήστε τη διεύθυνση URL του έργου και το κλειδί anon με τα δικά σας στοιχεία που μπορείτε να βρείτε στο Ρυθμίσεις έργου 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. Αυτό θα δημιουργήσει μια νέα σελίδα διαθέσιμη στη διαδρομή /upload. Εάν χρησιμοποιείτε το Next.js 12, δημιουργήστε το upload.js στο σελίδες ντοσιέ.

Στη σελίδα μεταφόρτωσης, προσθέστε τον παρακάτω κώδικα, για να δημιουργήσετε τη φόρμα.

"χρήση πελάτη";
εισαγωγή { useState } από"αντιδρώ";
εξαγωγήΠροκαθορισμένολειτουργίαΣελίδα() {
συνθ [αρχείο, setfile] = useState([]);


συνθ handleΥποβολή = ασυγχρονισμός (ε) => {
 e.preventDefault();
// μεταφόρτωση εικόνας
 };


συνθ handleFileSelected = (μι) => {
 setfile (e.target.files[0]);
 };
ΕΠΙΣΤΡΟΦΗ (


"αρχείο" όνομα="εικόνα" onChange={handleFileSelected} />

Όταν επιλέγετε ένα αρχείο και κάνετε κλικ στο κουμπί υποβολής, η φόρμα πρέπει να καλεί τη συνάρτηση handleSubmit. Σε αυτή τη λειτουργία θα ανεβάσετε την εικόνα.

Για μεγάλες φόρμες με πολλά πεδία, μπορεί να είναι ευκολότερο χρησιμοποιήστε μια βιβλιοθήκη φορμών όπως το formik να χειριστεί την επικύρωση και την υποβολή.

Μεταφόρτωση αρχείου εικόνας σε κάδο αποθήκευσης Supabase

Στη συνάρτηση handleSubmit, χρησιμοποιήστε τον πελάτη Supabase για να ανεβάσετε την εικόνα προσθέτοντας τον παρακάτω κώδικα.

συνθ handleΥποβολή = ασυγχρονισμός (ε) => {
 e.preventDefault();
συνθ όνομα αρχείου = `${uuidv4()}-${file.name}`;
συνθ { δεδομένα, σφάλμα } = αναμένω supabase.αποθήκευση
 .από("εικόνες")
 .upload (όνομα αρχείου, αρχείο, {
 cacheControl: "3600",
 upsert: ψευδής,
 });
συνθ filepath = data.path;
// αποθήκευση διαδρομής αρχείου στη βάση δεδομένων
 };

Σε αυτή τη λειτουργία, δημιουργείτε ένα μοναδικό όνομα αρχείου συνενώνοντας το όνομα αρχείου και ένα UUID που δημιουργείται από το πακέτο uuid npm. Αυτό συνιστάται για την αποφυγή αντικατάστασης αρχείων που μοιράζονται το ίδιο όνομα.

Θα χρειαστεί να εγκαταστήσετε το πακέτο uuid μέσω npm, επομένως αντιγράψτε και εκτελέστε την παρακάτω εντολή στο τερματικό.

npm εγκατάσταση uuid

Στη συνέχεια, στο επάνω μέρος της σελίδας μεταφόρτωσης, εισαγάγετε την έκδοση 4 του uuid.

εισαγωγή { v4 όπως και uuidv4 } από"uuid";

Εάν δεν θέλετε να χρησιμοποιήσετε το πακέτο uuid, υπάρχουν και άλλα μεθόδους που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε μοναδικά αναγνωριστικά.

Στη συνέχεια, χρησιμοποιήστε τον πελάτη supabase για να ανεβάσετε το αρχείο στον κάδο αποθήκευσης που ονομάζεται "εικόνες". Θυμηθείτε να εισαγάγετε τον πελάτη supabase στο επάνω μέρος του αρχείου σας.

εισαγωγή { subbase } από"@/lib/supbase";

Σημειώστε ότι περνάτε τη διαδρομή προς την εικόνα και την ίδια την εικόνα. Αυτή η διαδρομή λειτουργεί όπως και στο σύστημα αρχείων. Για παράδειγμα, εάν αποθηκεύατε την εικόνα σε έναν φάκελο στον κάδο που ονομάζεται public, θα καθορίζετε τη διαδρομή ως "/public/filename".

Το Supabase θα επιστρέψει ένα αντικείμενο που περιέχει τα δεδομένα και το αντικείμενο σφάλματος. Το αντικείμενο δεδομένων περιέχει τη διεύθυνση URL της εικόνας που μόλις ανεβάσατε.

Για να λειτουργήσει αυτή η λειτουργία μεταφόρτωσης, πρέπει να δημιουργήσετε μια πολιτική πρόσβασης που επιτρέπει στην εφαρμογή σας να εισάγει και να διαβάζει δεδομένα σε έναν κάδο αποθήκευσης Supabase, ακολουθώντας αυτά τα βήματα:

  1. Στον πίνακα ελέγχου του έργου σας, κάντε κλικ στο Αποθήκευση καρτέλα στην αριστερή πλαϊνή γραμμή.
  2. Επιλέξτε τον κάδο αποθήκευσης και κάντε κλικ στο Πρόσβαση αυτί.
  3. Κάτω από Πολιτικές κάδου, κάντε κλικ στο Νέα πολιτική κουμπί.
  4. Επίλεξε το Για πλήρη προσαρμογή επιλογή δημιουργίας πολιτικής από την αρχή.
  5. Στο Προσθήκη πολιτικής διαλόγου, εισαγάγετε ένα όνομα για την πολιτική σας (π.χ. "Να επιτρέπεται η εισαγωγή και ανάγνωση").
  6. Επιλέγω ΕΙΣΑΓΕΤΕ και ΕΠΙΛΕΓΩ άδειες από το Επιτρεπόμενες λειτουργίες πτυσώμενο μενού.
  7. Κάντε κλικ στο Ανασκόπηση κουμπί για να ελέγξετε τις πολιτικές.
  8. Κάντε κλικ στο Αποθηκεύσετε κουμπί για να προσθέσετε την πολιτική.

Θα πρέπει τώρα να μπορείτε να ανεβάσετε εικόνες χωρίς να εμφανίσετε σφάλμα πρόσβασης.

Εξυπηρέτηση των μεταφορτωμένων εικόνων στην εφαρμογή σας

Για να προβάλετε την εικόνα στον ιστότοπό σας, χρειάζεστε μια δημόσια διεύθυνση URL, την οποία μπορείτε να ανακτήσετε με δύο διαφορετικούς τρόπους.

Μπορείτε να χρησιμοποιήσετε τον πελάτη Supabase ως εξής:

συνθ διαδρομή αρχείου = "path_to_file_in_buckey"
συνθ { data } = subbase
 .αποθήκευση
 .από("εικόνες")
 .getPublicUrl(`${filepath}`)

Ή μπορείτε να συνδέσετε μη αυτόματα τη διεύθυνση URL του κάδου με τη διαδρομή αρχείου:

συνθ διαδρομή αρχείου = `${bucket_url}/${filepath}`

Χρησιμοποιήστε όποια μέθοδο προτιμάτε. Αφού έχετε τη διαδρομή αρχείου, μπορείτε να τη χρησιμοποιήσετε στο στοιχείο εικόνας Next.js ως εξής:

"" πλάτος={200} ύψος ={200}/>

Αυτός ο κωδικός θα εμφανίσει την εικόνα στον ιστότοπό σας.

Δημιουργία ισχυρών εφαρμογών με το Supabase

Χρησιμοποιώντας αυτόν τον κωδικό, μπορείτε να αποδεχτείτε ένα αρχείο από έναν χρήστη μέσω μιας φόρμας και να το ανεβάσετε στο χώρο αποθήκευσης Supabase. Στη συνέχεια, μπορείτε να ανακτήσετε αυτήν την εικόνα και να την εμφανίσετε στον ιστότοπό σας.

Εκτός από την αποθήκευση εικόνων, το Supabase διαθέτει και άλλες λειτουργίες. Μπορείτε να δημιουργήσετε μια βάση δεδομένων PostgreSQL, να γράψετε συναρτήσεις άκρης και να ρυθμίσετε τον έλεγχο ταυτότητας για τους χρήστες σας.