Πώς να ανεβάσετε αρχεία στο χώρο αποθήκευσης Firebase χρησιμοποιώντας το React.js

Η αποθήκευση Firebase παρέχει έναν απλό τρόπο αποθήκευσης δεδομένων που δημιουργούνται από τον χρήστη, όπως εικόνες, βίντεο και αρχεία ήχου. Ενσωματώνεται με τον έλεγχο ταυτότητας Firebase, ώστε να μπορείτε να ελέγχετε ποιος έχει πρόσβαση στα αρχεία.

Μπορείτε να αποθηκεύσετε μεγάλες ποσότητες περιεχομένου χρησιμοποιώντας το Firebase, καθώς κλιμακώνεται αυτόματα για να ταιριάζει στις ανάγκες σας. Είναι απλό στη χρήση με ένα πλαίσιο τρίτων, όπως η βιβλιοθήκη React JavaScript

Ρύθμιση έργου

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

Ξεκινήστε από δημιουργία μιας εφαρμογής React χρησιμοποιώντας δημιουργία-react-app. Εκτελέστε αυτήν την εντολή για να δημιουργήσετε ένα έργο React που ονομάζεται firebase-upload:

npx δημιουργώ-react-app firebase-upload

Για να είναι απλό, χρειάζεστε μόνο ένα κουμπί εισαγωγής που δέχεται αρχεία και ένα κουμπί μεταφόρτωσης. Αντικαταστήστε τα περιεχόμενα του App.js με τον παρακάτω κωδικό.

εισαγωγή {useState} από "αντιδρώ"
λειτουργίαApp() {
 const [αρχείο, setFile] = useState("");
// Χειρίζεται την είσοδο αλλαγήΕκδήλωσηκαι κατάσταση ενημερώσεων
λειτουργίαλαβήΑλλαγή(Εκδήλωση) {
setFile(Εκδήλωση.στόχος.αρχεία[0]);
 }
ΕΠΙΣΤΡΟΦΗ (
<div>
<τύπος εισόδου="αρχείο" αποδέχομαι="εικόνα/*" onChange={handleChange}/>
<κουμπί>Μεταφόρτωση στο Firebase</button>
</div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Στον παραπάνω κώδικα, το εισαγωγή ετικέτας αποδέχομαι Το χαρακτηριστικό έχει οριστεί να επιτρέπει μόνο εικόνες. ο handleChange() Η λειτουργία χειρίζεται την αλλαγή εισόδου και ενημερώνει την κατάσταση για να αποθηκεύσει το επιλεγμένο αρχείο.

Ρύθμιση Firebase

Πριν ανεβάσετε το αρχείο στο χώρο αποθήκευσης Firebase, πρέπει να δημιουργήσετε ένα έργο Firebase.

Δημιουργήστε ένα έργο Firebase

Ακολουθήστε τις παρακάτω οδηγίες για να δημιουργήσετε ένα έργο Firebase:

1. μεταβείτε στο Firebase σελίδα της κονσόλας και κάντε κλικ στην Προσθήκη έργου ή Δημιουργήστε ένα έργο (αν δημιουργείτε ένα έργο για πρώτη φορά).
2. Δώστε στο έργο σας ένα όνομα της επιλογής σας και κάντε κλικ Να συνεχίσει.
3. Καταργήστε την επιλογή του Google Analytics επειδή δεν το χρειάζεστε για αυτό το έργο και κάντε κλικ Δημιουργία έργου.
4. Κάντε κλικ Να συνεχίσει μόλις το έργο είναι έτοιμο.
5. Κάνε κλικ στο εικονίδιο web στη σελίδα επισκόπησης του έργου για να καταχωρήσετε μια εφαρμογή Ιστού.
6. Δώστε στην εφαρμογή σας ένα ψευδώνυμο και κάντε κλικ Κανω ΕΓΓΡΑΦΗ.
7. Αντιγράψτε το αντικείμενο διαμόρφωσης που παρέχεται. Θα το χρειαστείτε για να συνδέσετε την εφαρμογή σας στο Firebase.

Δημιουργήστε έναν κάδο αποθήκευσης Cloud

Το Firebase αποθηκεύει αρχεία σε έναν κάδο αποθήκευσης cloud. Ακολουθήστε τα παρακάτω βήματα για να το δημιουργήσετε:

1. Στη σελίδα επισκόπησης του έργου, κάντε κλικ στο Αποθήκευση καρτέλα στον αριστερό πίνακα πλοήγησης.
2. Κάντε κλικ Ξεκίνα και επιλέξτε δοκιμαστική λειτουργία.
3. Επιλέξτε την προεπιλεγμένη θέση του κάδου αποθήκευσης και κάντε κλικ Εγινε.

Είστε πλέον έτοιμοι να ξεκινήσετε τη μεταφόρτωση αρχείων στο χώρο αποθήκευσης Firebase.

Προσθέστε το Firebase στο React

Στο τερματικό σας, μεταβείτε στον φάκελο του έργου React. Εκτελέστε την ακόλουθη εντολή για να εγκαταστήσετε το Firebase SDK:

npm εγκαθιστώ firebase

Δημιουργήστε ένα νέο αρχείο, firebaseConfig.jsκαι αρχικοποιήστε το Firebase.

εισαγωγή { αρχικοποίηση εφαρμογής } από "firebase/app"?
εισαγωγή { getStorage } από "firebase/storage"?
// Αρχικοποίηση Firebase
συνθ app = αρχικοποίησηΕφαρμογής ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 Αναγνωριστικό έργου: <ID έργου>,
 Αποθηκευτικός Κάδος: <Αποθηκευτικός Κάδος>,
 messagingSenderId: <MessagingSenderId>,
 Αναγνωριστικό εφαρμογής: <appId>,
 αναγνωριστικό μέτρησης: <αναγνωριστικό μέτρησης>,
});
// Αναφορά αποθήκευσης Firebase
συνθ αποθήκευση = getStorage (εφαρμογή);
εξαγωγήΠροκαθορισμένο αποθήκευση;

Χρησιμοποιήστε το αντικείμενο διαμόρφωσης που λάβατε μετά τη δημιουργία του έργου Firebase για να αρχικοποιήσετε την εφαρμογή Firebase.

Η τελική γραμμή εξάγει την αναφορά αποθήκευσης Firebase, ώστε να έχετε πρόσβαση σε αυτήν την εμφάνιση από την υπόλοιπη εφαρμογή σας.

Δημιουργήστε μια λειτουργία Handler για να ανεβάσετε τις εικόνες στο Firebase

Κάνοντας κλικ στο κουμπί μεταφόρτωση θα πρέπει να ενεργοποιηθεί η λειτουργία που είναι υπεύθυνη για τη μεταφόρτωση του αρχείου στο χώρο αποθήκευσης Firebase. Ας δημιουργήσουμε αυτή τη συνάρτηση.

Σε App.js, προσθέστε τη συνάρτηση handleUpload. Στη συνάρτηση, ελέγξτε αν το αρχείο δεν είναι κενό, καθώς ένας χρήστης μπορεί να κάνει κλικ στο κουμπί αποστολής πριν επιλέξει ένα αρχείο. Εάν το αρχείο δεν υπάρχει, σηκώστε μια ειδοποίηση που λέει στον χρήστη να ανεβάσει πρώτα ένα αρχείο.

λειτουργίαhandleUpload() {
 αν (!αρχείο) {
 συναγερμός("Επιλέξτε πρώτα ένα αρχείο!")
 }
}

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

Ξεκινήστε εισάγοντας την υπηρεσία αποθήκευσης που δημιουργήσατε στο firebaseConfig.js αρχείο.

εισαγωγή αποθήκευση από "./firebaseConfig.js"

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

εισαγωγή {αναφορά} από "firebase/storage"
λειτουργίαhandleUpload() {
 αν (!αρχείο) {
 συναγερμός("Επιλέξτε πρώτα ένα αρχείο!")
 }
συνθ storageRef = ref (αποθήκευση, `/αρχεία/${file.name}`)
}

Στη συνέχεια, δημιουργήστε μια εργασία μεταφόρτωσης περνώντας την παρουσία αποθήκευσης Firebase στο uploadBytesResumable() λειτουργία. Υπάρχουν πολλές μέθοδοι που μπορείτε να χρησιμοποιήσετε, αλλά η συγκεκριμένη σάς επιτρέπει να διακόψετε και να συνεχίσετε τη μεταφόρτωση. Εκθέτει επίσης ενημερώσεις προόδου.

ο uploadBytesResumable() η λειτουργία αποδέχεται την αναφορά αποθήκευσης και το αρχείο προς αποστολή.

εισαγωγή {
 ref,
 uploadBytesResumable 
} από "firebase/storage"?
λειτουργίαhandleUpload() {
αν (!αρχείο) {
 alert ("Παρακαλώ επιλέξτε ένα αρχείο πρώτα!")
 }
συνθ storageRef = ref (αποθήκευση, `/αρχεία/${file.name}`)
συνθ uploadTask = uploadBytesResumable (storageRef, αρχείο);
}

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

εισαγωγή {
 ref,
 uploadBytes Resumable,
 getDownloadURL 
} από "βάση πυρκαγιάς/αποθήκευσης";
λειτουργίαhandleUpload() {
 αν (!αρχείο) {
 συναγερμός("Επιλέξτε πρώτα ένα αρχείο!")
 }
συνθ storageRef = ref (αποθήκευση,`/αρχεία/${file.name}`)
συνθ uploadTask = uploadBytesResumable (storageRef, αρχείο);
uploadTask.επί(
"κατάσταση_αλλάχθηκε",
 (στιγμιότυπο) => {
συνθ τοις εκατό = Μαθηματικά.στρογγυλό(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// ενημέρωση προόδου
 setPercent (ποσοστό);
 },
 (λάθος) => κονσόλα.log (σφάλμα),
 () => {
// url λήψης
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
κονσόλα.log (url);
 });
 }
 ); 
}

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

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

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

εισαγωγή { useState } από "αντιδρώ";
λειτουργίαApp() {
συνθ [ποσοστό, setPercent] = useState(0);
ΕΠΙΣΤΡΟΦΗ (
<div>
<τύπος εισόδου="αρχείο" onChange={handleChange} αποδοχή="" />
<κουμπί onClick={handleUpload}>Μεταφόρτωση στο Firebase</button>
<Π>{τοις εκατό} "% Έγινε"</Π>
</div>
 )
}

Εδώ είναι ο πλήρης κωδικός για App.js:

εισαγωγή { useState } από "αντιδρώ";
εισαγωγή { αποθήκευση } από "./firebaseConfig";
εισαγωγή { ref, uploadBytesResumable, getDownloadURL } από "firebase/storage"?
λειτουργίαApp() {
// Κατάσταση αποθήκευσης του μεταφορτωμένου αρχείου
 const [αρχείο, setFile] = useState("");
// πρόοδος
συνθ [ποσοστό, setPercent] = useState(0);
// Χειρισμός συμβάντος μεταφόρτωσης αρχείων και κατάσταση ενημέρωσης
λειτουργίαλαβήΑλλαγή(Εκδήλωση) {
setFile(Εκδήλωση.στόχος.αρχεία[0]);
 }
συνθ handleUpload = () => {
 αν (!αρχείο) {
 συναγερμός("Ανεβάστε πρώτα μια εικόνα!");
 }
συνθ storageRef = ref (αποθήκευση, `/αρχεία/${file.name}`);
// η πρόοδος μπορεί να τεθεί σε παύση και να συνεχιστεί. Εκθέτει επίσης ενημερώσεις προόδου.
// Λαμβάνει την αναφορά αποθήκευσης και το αρχείο προς αποστολή.
συνθ uploadTask = uploadBytesResumable (storageRef, αρχείο);
uploadTask.επί(
"κατάσταση_αλλάχθηκε",
 (στιγμιότυπο) => {
συνθ τοις εκατό = Μαθηματικά.στρογγυλό(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// ενημέρωση προόδου
 setPercent (ποσοστό);
 },
 (λάθος) => κονσόλα.log (σφάλμα),
 () => {
// url λήψης
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
κονσόλα.log (url);
 });
 }
 );
 };
ΕΠΙΣΤΡΟΦΗ (
<div>
<τύπος εισόδου="αρχείο" onChange={handleChange} αποδοχή="/image/*" />
<κουμπί onClick={handleUpload}>Μεταφόρτωση στο Firebase</button>
<Π>{τοις εκατό} "% Έγινε"</Π>
</div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Κάνετε περισσότερα με το Firebase Storage

Η μεταφόρτωση αρχείων είναι μια από τις πιο βασικές δυνατότητες του χώρου αποθήκευσης Firebase. Ωστόσο, υπάρχουν και άλλα πράγματα που σας επιτρέπει η αποθήκευση Firebase να κάνετε. Μπορείτε να αποκτήσετε πρόσβαση, να εμφανίσετε, να οργανώσετε και να διαγράψετε τα αρχεία σας.

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

Έλεγχος ταυτότητας χρηστών με Firebase & React

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα