Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Banyak aplikasi bergantung pada web untuk kontennya. Dengan menghosting aset gambar di platform cloud pihak ketiga, Anda dapat memastikan bahwa aplikasi Anda memiliki akses yang cepat dan efisien ke aset tersebut.

Selain itu, Anda akan menghindari biaya penyimpanan dan bandwidth yang Anda keluarkan untuk menghosting aset menggunakan server lokal. Inilah sebabnya mengapa solusi cloud hosting gambar seperti Cloudinary menjadi semakin populer.

Ikuti terus untuk mempelajari cara menggunakan Cloudinary untuk menghosting aset gambar Anda.

Apa Itu Hosting Gambar, dan Mengapa Penting?

Hosting gambar adalah jenis layanan hosting web yang memungkinkan Anda menyimpan dan mengakses aset gambar atau media digital lainnya di platform cloud pihak ketiga.

Aset media seperti gambar sangat penting dalam menciptakan pengalaman pengguna yang luar biasa untuk aplikasi web apa pun. Layanan hosting gambar memudahkan Anda mengunggah, menyimpan, mengambil, dan mengelola aset Anda dari cloud, akibatnya, meningkatkan kinerja aplikasi Anda dengan memastikan waktu pemuatan yang lebih cepat dan gambar yang lebih baik kualitas.

instagram viewer

Apa itu Cloudinary?

Cloudinary adalah platform manajemen media berbasis cloud. Ini menyediakan fitur yang memudahkan Anda mengunggah, menyimpan, dan mengelola aset media digital seperti gambar dan video. Intinya, Cloudinary mempermudah pengelolaan semua media digital Anda yang diperlukan untuk aplikasi apa pun dari satu platform.

Siapkan Proyek Cloudinary untuk Menghosting File Gambar

Untuk mulai mengunggah dan menghosting file gambar, daftar ke a Cloudinary akun.

Masuk ke dasbor akun Anda dan klik tab ikon pengaturan di panel menu kiri.

Pada halaman pengaturan, klik pada Mengunggah tombol untuk membuka halaman pengaturan upload.

Sekarang, pergilah ke Unggah preset bagian pengaturan dan klik Tambahkan prasetel unggahan untuk membuat prasetel unggahan baru untuk aplikasi Anda.

Preset upload adalah konfigurasi parameter yang menentukan struktur default file media apa pun yang Anda upload di Cloudinary. Mereka membiarkan Anda menentukan seperangkat aturan untuk diterapkan setiap kali Anda mengunggah file media.

Parameter prasetel memastikan bahwa Cloudinary mengoptimalkan semua file media untuk dikirimkan ke aplikasi Anda, meningkatkan kinerja, dan mengurangi waktu muat.

Isi nama preset Anda dan pilih tidak ditandatangani mode dari menu tarik-turun yang ditampilkan. Mode penandatanganan memungkinkan Anda menentukan metode yang digunakan Cloudinary untuk mengautentikasi dan mengotorisasi unggahan media apa pun.

Memilih mode unsigned akan memungkinkan Anda mengunggah ke penyimpanan Cloudinary Anda dari aplikasi Anda tanpa mengautentikasi dengan Cloudinary. Sederhananya, mode ini memungkinkan Anda memilih gambar, dan mengunggahnya langsung dari aplikasi Anda. Cloudinary kemudian akan mengirimkannya berdasarkan permintaan.

Setelah melakukan perubahan tersebut, lanjutkan dan klik Menyimpan untuk membuat preset unggahan.

Buat Aplikasi Reaksi Demo

Anda dapat menyiapkan aplikasi React sederhana untuk menangani fungsi pengunggahan menggunakan titik akhir Cloudinary API dan widget pengunggahan.

Untuk memulai, buat demo aplikasi React. Selanjutnya, jalankan perintah di bawah ini untuk menjalankan server pengembangan dan arahkan ke http://localhost: 3000 di browser Anda untuk melihat hasilnya.

mulai npm

Selanjutnya, jalankan perintah ini untuk menginstal Axios, pustaka JavaScript yang digunakan untuk membuat permintaan HTTP dari browser.

npm instal axios

Upload File Gambar Menggunakan Cloudinary API Endpoint

Setelah menyiapkan aplikasi React, buat komponen unggahan yang membuat permintaan POST ke titik akhir API Cloudinary untuk mengunggah file gambar di penyimpanan awan Cloudinary. Anda kemudian akan merusak respons API untuk menampilkan gambar yang diunggah.

Buat Komponen Unggah

Di direktori /src, buat folder baru dan beri nama, komponen. Di folder ini, buat file baru, Upload.js.

Di file Upload.js, tambahkan kode di bawah ini:

impor Bereaksi, {useState} dari'reaksi';
impor Aksioma dari"aksi";
fungsiMengunggah() {
const [uploadFile, setUploadFile] = useState("");
const [cloudinaryImage, setCloudinaryImage] = useState("")


const handleUpload = (e) => {
 e.preventDefault();
const formData = baru FormData();
 formData.append("mengajukan", unggah data);
 formData.append("unggah_prasetel", "nama prasetel unggahan Anda");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Nama/gambar/unggah awan awan",
 formData
 )
 .Kemudian((tanggapan) => {
menghibur.log (tanggapan);
 setCloudinaryImage (response.data.secure_url);
 })
 .menangkap((kesalahan) => {
menghibur.log (kesalahan);
 });
 };
kembali ( 
"Aplikasi"> 
"sisi kiri"> 


 Unggah Gambar ke Cloudinary Cloud Storage</h3>


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

Inilah yang dilakukan kode unggahan:

  • Mendeklarasikan dua negara, unggah data Dan cloudinaryImage. Menggunakan ini untuk menyimpan file yang diunggah dan gambar yang dihasilkan dari Cloudinary.
  • Kolom input memungkinkan Anda untuk memilih file gambar dari sistem file mesin Anda. Saat Anda memilih file, itu memperbarui nilai variabel uploadFile.
  • Itu handleUpload function menggunakan Axios untuk membuat permintaan posting ke Cloudinary. Ini meneruskan file yang diunggah dan prasetel unggahan yang telah Anda kaitkan dengan akun cloud Cloudinary Anda. Mengklik tombol kirim memanggil fungsi ini.
  • Ketika kode menerima respons, kode tersebut menyimpan secure_url dari gambar Cloudinary dalam status.
  • Terakhir, ini merender dua bagian, satu untuk mengunggah file dan yang lainnya untuk menampilkan gambar yang dihasilkan.

Impor dan render komponen upload.js di file app.js Anda. Anda akan melihat respons seperti ini di browser setelah memilih dan mengunggah file gambar:

Buka akun Cloudinary Anda, dan klik Perpustakaan Media tab untuk melihat file yang diunggah.

Mengintegrasikan widget Cloudinary di aplikasi React Anda menyederhanakan proses pengunggahan secara signifikan. Selain itu, widget memungkinkan Anda mengunggah file gambar dari berbagai sumber, seperti Dropbox.

Untuk mengintegrasikan widget di aplikasi React Anda, pertama-tama, Anda perlu menyertakan library JavaScript jarak jauh widget di file index.html Anda di direktori /public. Tambahkan tag skrip di bawah ini pada bagian kepala di file index.html Anda.

<naskahsrc=" https://upload-widget.cloudinary.com/global/all.js"
 ketik="teks/javascript">naskah>

Selanjutnya, di file upload.js Anda, tambahkan buat perubahan berikut:

  • Impor berikut ini Bereaksi kait: useEffect dan useRef. 
    impor {useState, useEffect, useRef} dari'reaksi';
  • Tambahkan kode di bawah ini: 
    const cloudinaryRef = useRef();
    const widgetRef = useRef();
     gunakanEfek(() => {
     cloudinaryRef.current = jendela.cloudinary;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     nama awan: 'nama cloud cloudinary Anda', 
     unggah Preset: 'nama preset upload'
     }, (kesalahan, hasil) => { 
    menghibur.log (kesalahan, hasil)
     });
     }, []);
    Kode di atas membuat referensi ke objek Cloudinary dan widget upload menggunakan hook useRef. Hook useEffect menjalankan kode di dalam callback satu kali saat komponen dipasang. Anda kemudian menginisialisasi widget menggunakan nama cloud Anda dan mengunggah nama prasetel dan mencatat hasil dan kesalahan yang mungkin terjadi dari widget.
  • Terakhir, buat sebuah tombol yang, ketika diklik, akan memanggil dan membuka widget unggahan.

Mendapatkan Hasil Maksimal dari Cloudinary

Cloudinary memberikan solusi ramah pengguna yang menyederhanakan proses pengelolaan file gambar dan aset media lainnya.

Selain menyediakan platform penyimpanan cloud, Cloudinary juga menawarkan fitur seperti transformasi gambar dan pengoptimalan gambar. Ini adalah alat penting untuk meningkatkan kualitas aset media Anda.