Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

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, w konsekwencji, zwiększając wydajność aplikacji, zapewniając krótszy czas ładowania i lepszy obraz jakość.

instagram viewer

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 się pochmurno konto.

Zaloguj się do pulpitu nawigacyjnego konta i kliknij zakładkę z ikoną ustawień w lewym okienku menu.

Na stronie ustawień kliknij przycisk Wgrywać przycisk, aby otworzyć stronę ustawień przesyłania.

Teraz udaj się do Prześlij ustawienia wstępne sekcję ustawień i kliknij Dodaj ustawienie wstępne przesyłania aby utworzyć nowe ustawienie wstępne przesyłania dla Twojej 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ę swojego ustawienia wstępnego i wybierz niepodpisany tryb 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 Ratować, 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.

Rozpocząć, stworzyć demonstracyjną aplikację React. Następnie uruchom poniższe polecenie, aby rozkręcić serwer programistyczny i przejść do http://localhost: 3000 w przeglądarce, aby zobaczyć wyniki.

np start

Następnie uruchom to polecenie, aby zainstalować Axios, bibliotekę JavaScript używaną do wysyłania żądań HTTP z przeglądarki.

npm zainstaluj osie

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 Reaguj, {useState} z'reagować';
import Aksjos z„osi”;
funkcjonowaćWgrywać() {
konst [przesłanyplik, ustawPrzesłanyplik] = useState("");
konst [cloudinaryImage, setCloudinaryImage] = useState("")


konst uchwytPrześlij = (mi) => {
 e.preventDefault();
konst dane formularza = nowy Tworzyć dane ();
 formData.append("plik", Przesyłanie pliku);
 formData.append("ustawienie_przesyłania", „nazwa ustawienia wstępnego przesyłania”);


 Axios.post(
" https://api.cloudinary.com/v1_1/your Cloudinary nazwa chmury/obraz/przesłanie”,
 tworzyć dane
 )
 .Następnie((odpowiedź) => {
konsola.log (odpowiedź);
 setCloudinaryImage (response.data.secure_url);
 })
 .złapać((błąd) => {
konsola.log (błąd);
 });
 };
powrót ( 
„Aplikacja”> 
"lewa strona"> 


 Prześlij obrazy do Cloudinary Cloud Storage</h3>


"plik"
 onChange ={(zdarzenie) => {setUploadFile (event.target.files[0]);}} 
 />
 </div>

Oto, co robi kod przesyłania:

  • Deklaruje dwa stany, Przesyłanie pliku I pochmurny obraz. 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.
  • The uchwytPrześlij funkcja używa Axios do wysyłania żądania pocztowego 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ź, zapisuje plik bezpieczny_url obrazu Cloudinary w stanie.
  • 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ź:

Udaj się na swoje konto Cloudinary i kliknij Biblioteka multimediów kartę, aby wyświetlić przesłany plik.

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.

<scenariuszźródło=" https://upload-widget.cloudinary.com/global/all.js"
 type="text/javascript">scenariusz>

Następnie w pliku upload.js dodaj następujące zmiany:

  • Zaimportuj następujące elementy Haki reakcji: useEffect i useRef. 
    import {useState, useEffect, useRef} z'reagować';
  • Dodaj poniższy kod: 
    konst CloudinaryRef = useRef();
    konst widgetRef = useRef();
     użyjEfekt(() => {
     cloudinaryRef.current = oknopochmurno;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     nazwa chmury: „nazwa twojej chmurowej chmury”, 
     prześlij ustawienie wstępne: „nazwa ustawienia wstępnego przesyłania”
     }, (błąd, wynik) => { 
    konsola.log (błąd, wynik)
     });
     }, []);
    Powyższy kod tworzy odwołanie do obiektu Cloudinary i widżetu przesyłania za pomocą haka useRef. Hak useEffect uruchamia kod wewnątrz wywołania zwrotnego raz, gdy komponent jest montowany. Następnie inicjujesz widżet przy użyciu nazwy w chmurze i przesyłasz wstępnie ustawioną nazwę oraz rejestrujesz wyniki i błędy, które mogą wystąpić w widgecie.
  • Na koniec utwórz przycisk, który po kliknięciu wywoła i otworzy widżet przesyłania.

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.