Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Birçok uygulama, içerikleri için web'e bağımlıdır. Görüntü varlıklarını üçüncü taraf bir bulut platformunda barındırarak, uygulamalarınızın bunlara hızlı ve verimli bir şekilde erişmesini sağlayabilirsiniz.

Ayrıca, şirket içi sunucuları kullanarak varlıkları barındırırken maruz kalacağınız depolama ve bant genişliği maliyetlerinden de kaçınacaksınız. Bu nedenle Cloudinary gibi görüntü barındırma bulut çözümleri giderek daha popüler hale geldi.

Görüntü varlıklarınızı barındırmak için Cloudinary'yi nasıl kullanacağınızı öğrenmek için takip edin.

Görüntü Barındırma Nedir ve Neden Önemlidir?

Görüntü barındırma, görüntü varlıklarınızı veya diğer dijital ortamları üçüncü taraf bir bulut platformunda depolamanıza ve bunlara erişmenize olanak tanıyan bir tür web barındırma hizmetidir.

Görüntüler gibi medya varlıkları, herhangi bir web uygulaması için harika bir kullanıcı deneyimi oluşturmak için gereklidir. Görüntü barındırma hizmetleri, varlıklarınızı buluttan yüklemenizi, depolamanızı, almanızı ve yönetmenizi kolaylaştırır, sonuç olarak, daha hızlı yükleme süreleri ve daha iyi görüntü sağlayarak uygulamanızın performansını artırır kalite.

instagram viewer

Cloudinary Nedir?

Cloudinary, bulut tabanlı bir medya yönetim platformudur. Görüntüler ve videolar gibi dijital ortam varlıklarını yüklemenizi, depolamanızı ve yönetmenizi kolaylaştıran özellikler sunar. Temel olarak Cloudinary, herhangi bir uygulama için gereken tüm dijital ortamlarınızı tek bir platformdan yönetmenizi kolaylaştırır.

Görüntü Dosyalarını Barındırmak İçin Bir Bulut Projesi Kurun

Resim dosyalarını yüklemeye ve barındırmaya başlamak için bir Bulutlu hesap.

Hesap panonuza giriş yapın ve sol menü bölmesindeki ayarlar simgesi sekmesine tıklayın.

Ayarlar sayfasında, üzerine tıklayın Yüklemek yükleme ayarları sayfasını açmak için düğmesine basın.

Şimdi, şuraya gidin: ön ayarları yükle ayarlar bölümüne tıklayın ve yükleme ön ayarı ekle uygulamanız için yeni bir karşıya yükleme hazır ayarı oluşturmak için.

Karşıya yükleme ön ayarı, Cloudinary'ye yüklediğiniz herhangi bir medya dosyasının varsayılan yapısını tanımlayan bir parametre yapılandırmasıdır. Her medya dosyası yüklediğinizde uygulanacak bir dizi kural tanımlamanıza izin verirler.

Önceden ayarlanmış parametreler, Cloudinary'nin uygulamanıza teslim edilmek üzere tüm medya dosyalarını optimize ederek performansı artırmasını ve yükleme süresini azaltmasını sağlar.

Hazır ayarınızın adını girin ve seçin imzasız görüntülenen açılır menüden modu seçin. İmzalama modları, Cloudinary'nin herhangi bir medya yüklemesinin kimliğini doğrulamak ve yetkilendirmek için kullandığı yöntemleri belirtmenize olanak tanır.

İmzasız modun seçilmesi, Cloudinary ile kimlik doğrulaması yapmadan uygulamalarınızdan Cloudinary depolama alanınıza yüklemeler yapmanızı sağlar. Basitçe söylemek gerekirse, bu mod bir resim seçmenize ve onu doğrudan uygulamanızdan yüklemenize olanak tanır. Cloudinary daha sonra istek üzerine teslim edecektir.

Bu değişiklikleri yaptıktan sonra devam edin ve tıklayın Kaydetmek yükleme ön ayarını oluşturmak için.

Bir Demo React Uygulaması Oluşturun

Cloudinary API uç noktasını ve yükleme widget'ını kullanarak yükleme işlevini işlemek için basit bir React uygulaması kurabilirsiniz.

Başlamak, bir demo React uygulaması oluşturun. Ardından, geliştirme sunucusunu döndürmek ve şuraya gitmek için aşağıdaki komutu çalıştırın: http://localhost: Sonuçları görüntülemek için tarayıcınızda 3000.

Npm başlangıç

Ardından, tarayıcıdan HTTP istekleri yapmak için kullanılan bir JavaScript kitaplığı olan Axios'u yüklemek için bu komutu çalıştırın.

npm kurulum eksenleri

Cloudinary API Uç Noktasını Kullanarak Görüntü Dosyalarını Yükleyin

React uygulamasını kurduktan sonra, Cloudinary bulut depolama alanına resim dosyalarını yüklemek için Cloudinary'nin API uç noktasına bir POST isteği yapan bir yükleme bileşeni oluşturun. Ardından, yüklenen görüntüyü görüntülemek için API yanıtını imha edeceksiniz.

Karşıya Yükleme Bileşeni Oluşturun

/src dizininde yeni bir klasör oluşturun ve onu component olarak adlandırın. Bu klasörde Upload.js adlı yeni bir dosya oluşturun.

Upload.js dosyasına aşağıdaki kodu ekleyin:

içe aktarmak Tepki ver, {useState} itibaren'tepki';
içe aktarmak eksenler itibaren"eksen";
işlevYüklemek() {
sabit [uploadFile, setUploadFile] = useState("");
sabit [cloudinaryImage, setCloudinaryImage] = useState("")


sabit işlemeYükleme = (e) => {
 e.preventDefault();
sabit formVeri = yeni Form verisi ();
 formData.append("dosya", dosya yükleme);
 formData.append("upload_preset", "yükleme ön ayar adınız");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Cloudinary bulut adı/resmi/yükleme",
 form verisi
 )
 .Daha sonra((cevap) => {
konsol.log (yanıt);
 setCloudinaryImage (response.data.secure_url);
 })
 .yakalamak((hata) => {
konsol.log (hata);
 });
 };
geri dönmek ( 
"Uygulama"> 
"Sol Taraf"> 


 Görüntüleri Cloudinary Cloud Storage'a Yükleyin</h3>


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

İşte yükleme kodunun yaptığı:

  • İki devlet ilan eder, dosya yükleme Ve Bulutlu Görüntü. Bunları, yüklenen dosyayı ve Cloudinary'den elde edilen görüntüyü depolamak için kullanır.
  • Giriş alanı, makinenizin dosya sisteminden bir görüntü dosyası seçmenizi sağlar. Bir dosya seçtiğinizde, uploadFile değişkeninin değeri güncellenir.
  • bu işlemeYükleme işlevi, Cloudinary'ye gönderi isteği göndermek için Axios'u kullanır. Yüklenen dosyaya ve Cloudinary bulut hesabınızla ilişkilendirdiğiniz yükleme ön ayarına geçer. Gönder düğmesinin tıklanması bu işlevi çağırır.
  • Kod bir yanıt aldığında, güvenli_url Cloudinary görüntüsünün durumunda.
  • Son olarak, biri dosyayı yüklemek için, diğeri de ortaya çıkan görüntüyü görüntülemek için olmak üzere iki bölüm oluşturur.

app.js dosyanızda upload.js bileşenini içe aktarın ve oluşturun. Resim dosyasını seçip yükledikten sonra tarayıcınızda şuna benzer bir yanıt görmelisiniz:

Cloudinary hesabınıza gidin ve tıklayın Medya kütüphanesi Yüklenen dosyayı görüntülemek için sekme.

Cloudinary widget'ını React uygulamanıza entegre etmek, yükleme işlemini önemli ölçüde basitleştirir. Ayrıca widget, Dropbox gibi çeşitli kaynaklardan görüntü dosyaları yüklemenize olanak tanır.

Widget'ı React uygulamanıza entegre etmek için öncelikle widget'ın uzak JavaScript kitaplığını /public dizinindeki index.html dosyanıza eklemeniz gerekir. Aşağıdaki komut dosyası etiketini index.html dosyanızın baş bölümüne ekleyin.

<senaryokaynak=" https://upload-widget.cloudinary.com/global/all.js"
 type="metin/javascript">senaryo>

Ardından, upload.js dosyanıza aşağıdaki değişiklikleri ekleyin:

  • Aşağıdakileri içe aktar Tepki kancaları: useEffect ve useRef. 
    içe aktarmak {useState, useEffect, useRef} itibaren'tepki';
  • Aşağıdaki kodu ekleyin: 
    sabit cloudinaryRef = useRef();
    sabit widgetRef = useRef();
     useEffect(() => {
     cloudinaryRef.current = pencere.bulutlu;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     bulutAdı: "bulanık bulut adınız", 
     ön ayar yükleme: 'yükleme hazır adı'
     }, (hata, sonuç) => { 
    konsol.log (hata, sonuç)
     });
     }, []);
    Yukarıdaki kod, useRef kancasını kullanarak Cloudinary nesnesine ve yükleme widget'ına bir referans oluşturur. UseEffect kancası, bileşen bağlandığında geri arama içindeki kodu bir kez çalıştırır. Ardından, bulut adınızı kullanarak pencere aracını başlatır, ön ayar adını yükler ve pencere öğesinden oluşabilecek sonuçları ve hataları günlüğe kaydedersiniz.
  • Son olarak, tıklandığında yükleme widget'ını çağıracak ve açacak bir düğme oluşturun.

Cloudinary'den En İyi Şekilde Yararlanma

Cloudinary, görüntü dosyalarını ve diğer medya varlıklarını yönetme sürecini basitleştiren kullanıcı dostu bir çözüm sunar.

Cloudinary, bir bulut depolama platformu sağlamanın yanı sıra görüntü dönüştürme ve görüntü optimizasyonu gibi özellikler de sunar. Bunlar, medya varlıklarınızın kalitesini artırmak için gerekli araçlardır.