Jak hostować pliki obrazów na Cloudinary w aplikacji React
Zawartość wielu aplikacji zależy od sieci. Hostując zasoby graficzne na platformie chmurowej innej firmy, możesz mieć pewność, że Twoje aplikacje będą miały do nich szybki i wydajny dostęp.
Co więcej, unikniesz kosztów przechowywania i przepustowości, które poniósłbyś, hostując zasoby przy użyciu serwerów lokalnych. Właśnie dlatego rozwiązania chmurowe do przechowywania obrazów, takie jak Cloudinary, stają się coraz bardziej popularne.
Śledź dalej, aby dowiedzieć się, jak używać Cloudinary do przechowywania zasobów graficznych.
Co to jest hosting obrazów i dlaczego jest ważny?
Hosting obrazów to rodzaj usługi hostingu internetowego, która umożliwia przechowywanie i uzyskiwanie dostępu do zasobów obrazów lub innych multimediów cyfrowych na platformie chmurowej innej firmy.
Zasoby multimedialne, takie jak obrazy, są niezbędne do stworzenia doskonałego doświadczenia użytkownika w dowolnej aplikacji internetowej. Usługi hostingu obrazów ułatwiają przesyłanie, przechowywanie, pobieranie i zarządzanie zasobami z chmury, co w konsekwencji zwiększa wydajność aplikacji, zapewniając krótszy czas ładowania i lepszą jakość obrazu.
Co to jest Cloudinary?
Cloudinary to oparta na chmurze platforma do zarządzania mediami. Zapewnia funkcje ułatwiające przesyłanie, przechowywanie i zarządzanie cyfrowymi zasobami multimedialnymi, takimi jak obrazy i filmy. Zasadniczo Cloudinary ułatwia zarządzanie wszystkimi mediami cyfrowymi potrzebnymi do dowolnej aplikacji z jednej platformy.
Skonfiguruj projekt Cloudinary do hostowania plików obrazów
Aby rozpocząć przesyłanie i hostowanie plików graficznych, zarejestruj konto Cloudinary .
Zaloguj się do pulpitu nawigacyjnego konta i kliknij zakładkę z ikoną ustawień w lewym okienku menu.
Na stronie ustawień kliknij przycisk Prześlij , aby otworzyć stronę ustawień przesyłania.
Teraz przejdź do sekcji Ustawienia ustawień przesyłania i kliknij Dodaj ustawienie wstępne przesyłania , aby utworzyć nowe ustawienie wstępne przesyłania dla swojej aplikacji.
Ustawienie wstępne przesyłania to konfiguracja parametrów, które definiują domyślną strukturę każdego pliku multimedialnego, który przesyłasz do Cloudinary. Pozwalają zdefiniować zestaw reguł, które mają być stosowane za każdym razem, gdy przesyłasz plik multimedialny.
Wstępnie ustawione parametry zapewniają, że Cloudinary optymalizuje wszystkie pliki multimedialne w celu dostarczenia do Twojej aplikacji, poprawiając wydajność i skracając czas ładowania.
Wpisz nazwę ustawienia wstępnego i wybierz tryb bez znaku z wyświetlonego menu rozwijanego. Tryby podpisywania pozwalają określić metody używane przez Cloudinary do uwierzytelniania i autoryzacji wszelkich przesyłanych multimediów.
Wybranie trybu bez znaku umożliwi przesyłanie danych do pamięci Cloudinary z aplikacji bez uwierzytelniania w Cloudinary. Mówiąc najprościej, ten tryb pozwala wybrać obraz i przesłać go bezpośrednio z aplikacji. Cloudinary dostarczy go na żądanie.
Po wprowadzeniu tych zmian śmiało kliknij Zapisz , aby utworzyć ustawienie wstępne przesyłania.
Utwórz aplikację Demo React
Możesz skonfigurować prostą aplikację React do obsługi funkcji przesyłania za pomocą punktu końcowego Cloudinary API i widżetu wysyłania.
Aby rozpocząć, utwórz demonstracyjną aplikację React. Następnie uruchom poniższe polecenie, aby uruchomić serwer programistyczny i przejdź do http://localhost:3000 w przeglądarce, aby wyświetlić wyniki.
npm start
Następnie uruchom to polecenie, aby zainstalować Axios, bibliotekę JavaScript używaną do wysyłania żądań HTTP z przeglądarki.
npm install axios
Prześlij pliki obrazów za pomocą Cloudinary API Endpoint
Po skonfigurowaniu aplikacji React utwórz komponent przesyłania, który wysyła żądanie POST do punktu końcowego interfejsu API Cloudinary w celu przesłania plików obrazów do magazynu w chmurze Cloudinary. Następnie zdestrukturyzujesz odpowiedź API, aby wyświetlić przesłany obraz.
Utwórz komponent przesyłania
W katalogu /src utwórz nowy folder i nadaj mu nazwę, components. W tym folderze utwórz nowy plik Upload.js.
W pliku Upload.js dodaj poniższy kod:
import React, {useState} from 'react';
import Axios from "axios";
function Upload() {
const [uploadFile, setUploadFile] = useState("");
const [cloudinaryImage, setCloudinaryImage] = useState("")
const handleUpload = (e) => {
e.preventDefault();
const formData = new FormData ();
formData.append("file", uploadFile);
formData.append("upload_preset", "your upload preset name");
Axios.post(
"https://api.cloudinary.com/v1_1/your Cloudinary cloud name/image/upload",
formData
)
.then((response) => {
console.log(response);
setCloudinaryImage(response.data.secure_url);
})
.catch((error) => {
console.log(error);
});
};
return (
<div className="App">
<section className="left-side">
<form>
<h3> Upload Images to Cloudinary Cloud Storage</h3>
<div>
<input type="file"
onChange ={(event) => {setUploadFile(event.target.files[0]);}}
/>
</div>
<button onClick = {handleUpload}> Upload File</button>
</form>
</section>
<section className="right-side">
<h3>The resulting image will be displayed here</h3>
{cloudinaryImage && (<img src={cloudinaryImage} />)}
</section>
</div>
);
}
export default Upload;
Oto, co robi kod przesyłania:
- Deklaruje dwa stany, uploadFile i cloudinaryImage . Wykorzystuje je do przechowywania przesłanego pliku i wynikowego obrazu z Cloudinary.
- Pole wejściowe umożliwia wybranie pliku obrazu z systemu plików urządzenia. Po wybraniu pliku aktualizuje wartość zmiennej uploadFile.
- Funkcja handleUpload używa Axios do wysyłania żądania postu do Cloudinary. Przekazuje przesłany plik i ustawienie wstępne przesyłania, które powiązałeś z kontem Cloudinary w chmurze. Kliknięcie przycisku przesyłania wywołuje tę funkcję.
- Gdy kod otrzyma odpowiedź, przechowuje w stanie bezpieczny adres URL obrazu Cloudinary .
- Na koniec renderuje dwie sekcje, jedną do przesyłania pliku, a drugą do wyświetlania wynikowego obrazu.
Zaimportuj i wyrenderuj komponent upload.js w pliku app.js. Po wybraniu i przesłaniu pliku obrazu w przeglądarce powinna pojawić się taka odpowiedź:
Przejdź do swojego konta Cloudinary i kliknij kartę Biblioteka multimediów , aby wyświetlić przesłany plik.
Prześlij pliki obrazów za pomocą Cloudinary Widget
Zintegrowanie widżetu Cloudinary z aplikacją React znacznie upraszcza proces przesyłania. Dodatkowo widżet umożliwia przesyłanie plików graficznych z różnych źródeł, takich jak Dropbox.
Aby zintegrować widżet z aplikacją React, najpierw musisz dołączyć zdalną bibliotekę JavaScript widżetu do pliku index.html w katalogu /public. Dodaj poniższy tag script w sekcji head w pliku index.html.
<script src="https://upload-widget.cloudinary.com/global/all.js"
type="text/javascript"></script>
Następnie w pliku upload.js dodaj następujące zmiany:
- Zaimportuj następujące hooki Reacta: useEffect i useRef.
import {useState, useEffect, useRef} from 'react'; - Dodaj poniższy kod:
const cloudinaryRef = useRef();
const widgetRef = useRef();
useEffect(() => {
cloudinaryRef.current = window.cloudinary;
widgetRef.current = cloudinaryRef.current.createUploadWidget({
cloudName: 'your cloudinary cloud name',
uploadPreset: 'the upload preset name'
}, (error, result) => {
console.log(error, result)
});
}, []); - Na koniec utwórz przycisk, który po kliknięciu wywoła i otworzy widżet przesyłania.
<button onClick = { () => widgetRef.current.open()} >
Upload Via Widget
</button>
Maksymalne wykorzystanie Cloudinary
Cloudinary zapewnia przyjazne dla użytkownika rozwiązanie, które upraszcza proces zarządzania plikami graficznymi i innymi zasobami multimedialnymi.
Oprócz zapewniania platformy do przechowywania w chmurze, Cloudinary oferuje również funkcje, takie jak transformacje obrazu i optymalizacja obrazu. Są to niezbędne narzędzia do poprawy jakości zasobów multimedialnych.
Dodaj komentarz