Πώς να φιλοξενήσετε αρχεία εικόνας στο Clodinary σε μια εφαρμογή React

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

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

Ακολουθήστε για να μάθετε πώς να χρησιμοποιείτε το Cloudinary για τη φιλοξενία των στοιχείων εικόνων σας.

Τι είναι το Image Hosting και γιατί είναι σημαντικό;

Η φιλοξενία εικόνας είναι ένας τύπος υπηρεσίας φιλοξενίας Ιστού που σας επιτρέπει να αποθηκεύετε και να έχετε πρόσβαση στα στοιχεία εικόνας σας ή σε άλλα ψηφιακά μέσα σε μια πλατφόρμα cloud τρίτων.

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

Τι είναι το Cloudinary;

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

Ρύθμιση ενός Cloudinary Project για να φιλοξενήσει αρχεία εικόνας

Για να ξεκινήσετε με τη μεταφόρτωση και τη φιλοξενία αρχείων εικόνας, εγγραφείτε για ένα Συννεφιασμένος λογαριασμός.

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

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

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

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

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

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

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

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

Δημιουργήστε μια εφαρμογή Demo React

Μπορείτε να ρυθμίσετε μια απλή εφαρμογή React για τη διαχείριση της λειτουργικότητας μεταφόρτωσης χρησιμοποιώντας το τελικό σημείο του Cloudinary API και το γραφικό στοιχείο μεταφόρτωσης.

Για να ξεκινήσετε, δημιουργήστε μια επίδειξη εφαρμογής React. Στη συνέχεια, εκτελέστε την παρακάτω εντολή για να περιστρέψετε τον διακομιστή ανάπτυξης και μεταβείτε σε αυτόν http://localhost: 3000 στο πρόγραμμα περιήγησής σας για να δείτε τα αποτελέσματα.

npm έναρξη

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

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

Μεταφόρτωση αρχείων εικόνας με χρήση Cloudinary API Endpoint

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

Δημιουργήστε ένα στοιχείο μεταφόρτωσης

Στον κατάλογο /src, δημιουργήστε έναν νέο φάκελο και ονομάστε τον, στοιχεία. Σε αυτόν τον φάκελο, δημιουργήστε ένα νέο αρχείο, Upload.js.

Στο αρχείο Upload.js, προσθέστε τον παρακάτω κώδικα:

εισαγωγή React, {useState} από'αντιδρώ';
εισαγωγή Αξιος από"αξιος";
λειτουργίαΜεταφόρτωση() {
συνθ [uploadFile, setUploadFile] = useState("");
συνθ [cloudinaryImage, setCloudinaryImage] = useState("")
συνθ handleUpload = (μι) => {
 e.preventDefault();
συνθ formData = νέος FormData ();
 formData.append("αρχείο", ανέβασμα αρχείου);
 formData.append("upload_preset", "το προκαθορισμένο όνομα μεταφόρτωσης");
 Axios.post(
" https://api.cloudinary.com/v1_1/your Όνομα/εικόνα/μεταφόρτωση νεφελώδους σύννεφου",
 φόρμαΔεδομένα
 )
 .έπειτα((απάντηση) => {
κονσόλα.log (απάντηση);
 setCloudinaryImage (response.data.secure_url);
 })
 .σύλληψη((λάθος) => {
κονσόλα.log (σφάλμα);
 });
 };
ΕΠΙΣΤΡΟΦΗ ( 
"Εφαρμογή"> 
"αριστερή πλευρά"> 


 Μεταφόρτωση εικόνων στο Cloudinary Cloud Storage</h3>


"αρχείο"
 onChange ={(event) => {setUploadFile (event.target.files[0]);}} 
 />
 </div>
 Μεταφόρτωση αρχείου</button>
 </form> 
 </section>
"σωστη πλευρα">
Η εικόνα που προκύπτει θα εμφανιστεί εδώ</h3>
 {cloudinaryImage && ( <imgsrc={cloudinaryImage} /> )}
 </section>
 </div>
 );
} 
εξαγωγήΠροκαθορισμένο Μεταφόρτωση?

Δείτε τι κάνει ο κώδικας μεταφόρτωσης:

• Δηλώνει δύο κράτη, ανέβασμα αρχείου και συννεφιασμένηΕικόνα. Τα χρησιμοποιεί για να αποθηκεύσει το μεταφορτωμένο αρχείο και την εικόνα που προκύπτει από το Clodinary.
• Το πεδίο εισαγωγής σάς επιτρέπει να επιλέξετε ένα αρχείο εικόνας από το σύστημα αρχείων του μηχανήματός σας. Όταν επιλέγετε ένα αρχείο, ενημερώνει την τιμή της μεταβλητής uploadFile.
• ο handleUpload Η συνάρτηση χρησιμοποιεί το Axios για να κάνει ένα αίτημα ανάρτησης στο Cloudinary. Περνά στο μεταφορτωμένο αρχείο και την προεπιλογή μεταφόρτωσης που έχετε συσχετίσει με τον λογαριασμό σας στο Clodinary cloud. Κάνοντας κλικ στο κουμπί υποβολής καλείται αυτή η λειτουργία.
• Όταν ο κώδικας λάβει μια απάντηση, αποθηκεύει το safe_url της συννεφιασμένης εικόνας σε κατάσταση.
• Τέλος, αποδίδει δύο ενότητες, μία για τη μεταφόρτωση του αρχείου και την άλλη για την εμφάνιση της εικόνας που προκύπτει.

Εισαγάγετε και αποδώστε το στοιχείο upload.js στο αρχείο σας app.js. Θα πρέπει να δείτε μια απάντηση όπως αυτή στο πρόγραμμα περιήγησής σας μόλις επιλέξετε και ανεβάσετε το αρχείο εικόνας:

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

Η ενσωμάτωση του γραφικού στοιχείου Clodinary στην εφαρμογή React απλοποιεί σημαντικά τη διαδικασία μεταφόρτωσης. Επιπλέον, το widget σάς επιτρέπει να ανεβάσετε αρχεία εικόνας από διάφορες πηγές, όπως το Dropbox.

Για να ενσωματώσετε το γραφικό στοιχείο στην εφαρμογή React, πρώτα, πρέπει να συμπεριλάβετε την απομακρυσμένη βιβλιοθήκη JavaScript του γραφικού στοιχείου στο αρχείο index.html στον κατάλογο /public. Προσθέστε την ετικέτα σεναρίου παρακάτω στην ενότητα head στο αρχείο index.html.

<γραφήsrc=" https://upload-widget.cloudinary.com/global/all.js"
 type="text/javascript">γραφή>

Στη συνέχεια, στο αρχείο upload.js, προσθέστε κάντε τις ακόλουθες αλλαγές:

• Εισαγάγετε τα ακόλουθα React hooks: useEffect και useRef.

  εισαγωγή {useState, useEffect, useRef} από'αντιδρώ';

• Προσθέστε τον παρακάτω κώδικα:

  συνθ cloudinaryRef = useRef();
  συνθ widgetRef = useRef();
   useEffect(() => {
   cloudinaryRef.current = παράθυρο.νεφελώδης?
   widgetRef.current = cloudinaryRef.current.createUploadWidget({
   cloudName: "το νεφελώδες όνομα σας στο σύννεφο", 
   uploadPreset: "το προκαθορισμένο όνομα μεταφόρτωσης"
   }, (σφάλμα, αποτέλεσμα) => { 
  κονσόλα.log (σφάλμα, αποτέλεσμα)
   });
   }, []);

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

   widgetRef.current.open()} >
   Μεταφόρτωση μέσω Widget
  </button>

Αξιοποιήστε στο έπακρο το Cloudinary

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

Εκτός από την παροχή μιας πλατφόρμας αποθήκευσης cloud, το Cloudinary προσφέρει επίσης λειτουργίες όπως μετασχηματισμοί εικόνας και βελτιστοποίηση εικόνας. Αυτά είναι απαραίτητα εργαλεία για τη βελτίωση της ποιότητας των μέσων σας.