Πώς μπορείτε εύκολα να αποθηκεύσετε και να προβάλετε εικόνες χρηστών σε αντίθεση

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

  • Κωδικός πρόσδεσης
  • Κωδικός Back End

Δείκτης:

  1. Εγκαταστήστε το Cloudinary
  2. Ρύθμιση στοιχείου μεταφοράς εικόνας
  3. Δημιουργία κλήσης API
  4. Εμφάνιση αποθηκευμένης εικόνας

Αυτό το σεμινάριο θα υποθέσει ότι έχετε δημιουργήσει μια βάση δεδομένων όπου μπορείτε να αποθηκεύσετε τα UUIDs των εικόνων. Εάν δεν έχετε ακόμα βάση δεδομένων, συνιστώ ανεπιφύλακτα το Hasura GraphQL Engine στο Heroku, έχει καλή τεκμηρίωση και οδηγίες για τον τρόπο ρύθμισης του React, καθώς και συμβατότητα με Auth0 για εξουσιοδότηση και έλεγχο ταυτότητας. Μετά τη φωτιά και την κόλαση της δημιουργίας μιας βάσης δεδομένων, ελπίζουμε να συναντηθούμε και πάλι ...

Για να ξεκινήσω, θα παρουσιάσω το Cloudinary. Το Cloudinary είναι μια υπηρεσία διαχείρισης εικόνων και βίντεο που μπορεί να αποθηκεύσει, να μετασχηματίσει και να επιστρέψει εικόνες από και προς την εφαρμογή σας. Θα το χρησιμοποιήσουμε καθώς διαθέτουν καλή τεκμηρίωση, εύκολο στη χρήση API και ένα φανταστικό δωρεάν σχέδιο.

1. Εγκαταστήστε το Cloudinary. Για να ρυθμίσετε, μεταβείτε στο Cloudinary.com και δημιουργήστε έναν λογαριασμό. Όταν συνδεθείτε, στην κορυφή θα πρέπει να δείτε το όνομα σύννεφου, το κλειδί API και το μυστικό API. Χρειάζεστε αυτά για να έχετε πρόσβαση στο αποθηκευτικό χώρο σας.

Αποθηκεύστε αυτά στην εφαρμογή σας React στο αρχείο .env.

Στον ριζικό κατάλογο σας, σας προτείνω να δημιουργήσετε ένα αρχείο config.js που εξάγει τα στοιχεία .env.

// Στο config.js const dotenv = require ('dotenv'). dotenv.config ({path: __dirname + '/.env'});
exports.CLOUD_NAME = process.env.CLOUD_NAME || 'σύννεφο-όνομα'; exports.API_KEY = process.env.API_KEY || 'api-key'. exports.API_SECRET = process.env.API_SECRET || 'μυστικό κλειδί';

2. Δημιουργήστε ένα λειτουργικό στοιχείο που λαμβάνει το αρχείο εικόνας ενός χρήστη. Χρησιμοποιούμε Λειτουργικά Συστατικά αντί των Αντιδραστηρίων Ανταπόκρισης σε αυτό το παράδειγμα.

// Εισαγωγή ImageDisplay.js React, {useState} από το 'react'; Εισαγωγή των αξόνων από το «axios».
Εξαγωγή της προεπιλεγμένης συνάρτησης ΠροφίλImage () {const [values, setValues] useState ({imagePreviewUrl: "", picFile: null}) ας fileInput = React.createRef (); // Ενεργοποιεί την είσοδο αρχείου χρήστη για να ορίσει div const editProfilePic = () => {fileInput.current.click (); } // χειρίζεται την εικόνα που εισήχθη από το χρήστη const handleImageChange = e => {e.preventDefault (); αφήστε τον αναγνώστη = νέο FileReader (); αφήστε inFile = e.target.files [0]; reader.onloadend = () => {setValues ​​({... τιμές, picFile: inFile, imagePreviewUrl: reader.result})}?
reader.readAsDataURL (inFile); },
// Καλέστε το Backend API, θα περιγράψει αυτό αργότερα const handleSubmit = async () => {// απάντηση αποθηκεύει την απάντηση πίσω από την απάντηση API = await axios.post (`/ storage / upload ', form_data) .catch => {alert ("Παρουσιάστηκε σφάλμα κατά τη μεταφόρτωση εικόνας, δοκιμάστε να μεταφορτώσετε ένα μικρότερο μέγεθος εικόνας ή δοκιμάστε ξανά αργότερα.") επιστροφή;})? }}
ΕΠΙΣΤΡΟΦΗ( editProfilePic ()}>  )}

Αυτό είναι ένα λίπος μπλοκ κώδικα εκεί, επιτρέψτε μου να το σπάσει.

Παρακάτω χρησιμοποιούμε ένα React Hook για να αποθηκεύουμε την προσωρινή εικόνα εικόνας προεπισκόπησης του αρχείου που ανέβασε το χρήστη και το ίδιο το αρχείο της ίδιας της εικόνας. Ως προεπιλογή, ορίσαμε τη διεύθυνση URL σε μια προσωρινή εικόνα στον διακομιστή μας και το αρχείο σε null.

const tempImage = απαιτούν ("assets / media / img / preview.jpg") const [τιμές, setValues] useState ({imagePreviewUrl: rempImage, picFile: null})

Τώρα, λόγω της λειτουργίας onClick, αν κάνουμε κλικ σε αυτό το div (που αποτελείται από μια εικόνα), θα προτρέψει τον χρήστη να εισάγει ένα αρχείο.

Μόλις υποβληθεί το αρχείο, η λειτουργία handleImageChange θέτει τη διεύθυνση URL προεπισκόπησης σε μια που δημιουργήθηκε από το FileReader και ορίζει το αρχείο μας στην υποβληθείσα εικόνα. Μόλις αλλάξει η διεύθυνση URL, θα πρέπει να δείτε την εικόνα που ανεβάσατε στην οθόνη! Δυστυχώς, αυτό δεν είναι τόσο εντυπωσιακό όσο δείχνει τις εικόνες που αποθηκεύσαμε από τον χρήστη, οπότε θα πρέπει να σας το δείξω λίγο.

Δεδομένου ότι έχουμε την εικόνα που θέλουμε να φορτώσουμε, θα χρησιμοποιήσουμε το SDK του Cloudinary για να ανεβάσετε φωτογραφίες στο αποθηκευτικό χώρο σας. Χρησιμοποιούμε τον Axios για να πραγματοποιήσουμε την τηλεφωνική κλήση στο backend / storage / upload αλλά μπορείτε να χρησιμοποιήσετε οποιαδήποτε εργαλεία HTTP.

3. Καλέστε το API Cloudinary. Ooga booga η κλήση διακομιστή είναι τώρα εδώ. Εάν δεν διαθέτετε ακόμα έναν διακομιστή για την εφαρμογή React, είναι απλή η ρύθμιση. Εδώ είναι ένα σεμινάριο για το πώς να ξεκινήσετε.

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

// εξαρτήσεις npm εγκατάσταση multer --save npm εγκατάσταση multer-αποθήκευση-συννεφιά --save npm εγκατάσταση συννεφιά - αποθήκευση
// Στο αρχείο Server Api, θα το ονομάσουμε storage.js. var multer = απαιτούν ('multer'); const νεκροταφείο = απαιτούν ("συννεφιά"); const constlinaryStorage = απαιτούν ("multer-αποθήκευση-συννεφιά")?
const {CLOUD_NAME, API_KEY, API_SECRET} = απαιτούν ('../ config');

Στη συνέχεια, ρυθμίστε τη ρύθμιση παραμέτρων Cloudinary ώστε να ταιριάζει στο χώρο αποθήκευσης. Χρησιμοποιούμε το multer για να χειριστούμε τα δεδομένα φόρμας (αρχείο εικόνας) και χρησιμοποιούμε το multer-storage-Cloudinary για να δημιουργήσουμε τον ορισμό αποθήκευσης του αρχείου μας για το Cloudinary.

Στην αποθήκευση, μπορείτε να δείτε ότι ο φάκελος είναι "εικόνες". Αυτό σημαίνει ότι πρέπει να συνδεθείτε στο Cloudinary -> Κάντε κλικ στην καρτέλα Βιβλιοθήκη πολυμέσων -> Δημιουργία φακέλου και να ονομάσετε το φάκελο "εικόνες" ή οτιδήποτε άλλο.

Ορίσαμε τις μορφές εισόδου που επιτρέπονται να είναι .jpg και .png αλλά υποστηρίζονται και άλλοι τύποι, συμπεριλαμβανομένης της μορφής βίντεο.

Οι μετασχηματισμοί χρησιμοποιούνται όταν θέλετε να επεξεργαστείτε την εικόνα πριν την μεταφορτώσετε στο Cloudinary. Αυτό είναι χρήσιμο για τη μείωση του μεγέθους της εικόνας για εξοικονόμηση χώρου καθώς και για την προσαρμογή της ποιότητας της εικόνας ανάλογα με τις ανάγκες σας. Για αυτήν την περίπτωση, έχω ρυθμίσει το πλάτος ή το ύψος σε 1900 εάν είναι μεγαλύτερο από αυτό ("w_gt_1900" "h_gt_1900", τεκμηρίωση εδώ). Κάνουμε 2 από αυτές, έτσι ώστε η εικόνα να κλιμακώνεται αντί να τεντώνει. Ορίζουμε επίσης την ποιότητα σε "αυτόματη", έτσι ώστε το Cloudinary μειώνει αυτόματα την ποιότητα της εικόνας για βέλτιστη αποθήκευση.

// στο storage.js
// Πληροφορίες πρόσβασης στο λογαριασμό cloudinary.config ({cloud_name: CLOUD_NAME, api_key: API_KEY, api_secret: API_SECRET}),
// Μεταφόρτωση εικόνας Διαμόρφωση const αποθηκευτικός χώρος = συννεφιασμόςΑποστολή ({θόρυβο: συννεφιά, φάκελος: "εικόνες", επιτρεπόμεναΦορτία: ["jpg", "png"], μετασχηματισμός: κλίμακα "}, {if:" h_gt_1900 ", ύψος: 1900, περικοπή:" κλίμακα "}, {ποιότητα:" auto "}, {format: 'jpg'}]}); const parser = multer ({αποθήκευση: αποθήκευση}).

Δημιουργήστε την κλήση POST. Ο αναλυτής χειρίζεται την εικόνα και μετά τη μεταφόρτωσή του θα λάβουμε ένα public_id σε αντάλλαγμα. Αποθηκεύστε αυτό το αναγνωριστικό στη βάση δεδομένων σας οπουδήποτε θέλετε. Μπορεί να είναι το "profile_pic_id" στον πίνακα "user" ή το "mithril_image_id" στον πίνακα "όπλα" του φόρουμ Runescape. Το res.json είναι το πώς στέλνουμε μια απάντηση στο μπροστινό μας άκρο, έτσι ώστε το front end να μπορεί να χειριστεί την αποθήκευση της βάσης δεδομένων του UUID αν χρησιμοποιείτε GraphQL (ακριβώς όπως εγώ!).

// στο storage.js
app.post ('upload', parser.single ('αρχείο'), (req, res) => {const imageUUID = req.file.public_id; // Κωδικός για την αποθήκευση του imageUUID στη βάση δεδομένων σας
// Επιστρέψτε το UUID στο μπροστινό άκρο σαν αυτό αν είναι απαραίτητο res.json (imageUUID); });

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

4. Αποκτήστε τη διεύθυνση URL της εικόνας με αποθηκευμένο UUID εικόνας. Ευτυχώς, το έκαναν εύκολο. Υπάρχουν 2 τρόποι για να το χειριστείτε αυτό, ο πρώτος τρόπος είναι να χρησιμοποιήσετε το SDK React για το Cloudinary -

// install npm install θολό-react - save
// εισαγωγή σε Component χρειάζεστε εικόνα στην εισαγωγή {Image, Video, Transformation, CloudinaryContext} από το 'σύννεφο-αντιδρά';

Αποκτήστε το UUID της εικόνας που θέλετε να εμφανίζεται από τη βάση δεδομένων σας. Στη συνέχεια, χρησιμοποιήστε την ετικέτα Image του Cloudinary για να εμφανίσετε την εικόνα, ορίζοντας το "publicId" στο UUID που έχετε. Αντικαταστήστε το YourCloudName με το πραγματικό όνομα σύννεφου σας από το Cloudinary.

Τώρα θα πρέπει να μπορείτε να δείτε την εικόνα σας!

Η δεύτερη μέθοδος προτιμάται για μένα δεδομένου ότι μου αρέσει να έχω τον έλεγχο της διεύθυνσης URL. Αυτή η μέθοδος δημιουργεί ένα αντικείμενο Clouldary και χρησιμοποιεί τη λειτουργία .url ().

// Σε αρχείο όπου θέλετε να εμφανίζεται η εικόνα var cloudinary = require ('σύννεφο / lib / συννεφιά)' v2
clouldary.config ({cloud_name: "YourCloudName"));

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

const imageUUID = props.ImageUUIDFromDatabase
ΕΠΙΣΤΡΟΦΗ 

Με αυτό τον τρόπο μπορείτε να εφαρμόσετε τη διεύθυνση URL για θέματα όπως φόντο, φόρτωση στοιχείων εικόνας, avatar κ.λπ. Οι παράμετροι για την εικόνα είναι εδώ (Στο παράδειγμά μου, ορίσαμε όλες τις διευθύνσεις URL εικόνων να είναι ασφαλείς, ύψος 200px και αυτόματη ποιότητα συμπίεση).

Ελπίζω ότι αυτό βοηθά, θυμάμαι να ξοδεύω πολύ χρόνο προσπαθώντας να το καταλάβω πριν την υλοποίηση, οπότε ελπίζω να σώσω κάποιον μερικές ώρες. Οποιεσδήποτε ερωτήσεις ή διορθώσεις επιτρέψτε μου να ξέρω στα σχόλια!