نحوه میزبانی فایل های تصویری در Cloudinary در یک برنامه React

از این میزبان تصویر مبتنی بر ابر استفاده کنید تا دردسر را از نیازهای ذخیره سازی رسانه خود دور کنید.

بسیاری از برنامه ها برای محتوای خود به وب وابسته هستند. با میزبانی دارایی های تصویر در یک پلتفرم ابری شخص ثالث، می توانید اطمینان حاصل کنید که برنامه های شما دسترسی سریع و کارآمد به آنها دارند.

علاوه بر این، از هزینه های ذخیره سازی و پهنای باندی که برای میزبانی دارایی ها با استفاده از سرورهای داخلی متحمل می شوید، جلوگیری خواهید کرد. به همین دلیل است که راه حل های ابری میزبان تصویر مانند Cloudinary به طور فزاینده ای محبوب شده اند.

برای یادگیری نحوه استفاده از Cloudinary برای میزبانی از دارایی های تصویری خود، همراه باشید.

میزبانی تصویر چیست و چرا مهم است؟

میزبانی تصویر نوعی از خدمات میزبانی وب است که به شما امکان می دهد دارایی های تصویری یا سایر رسانه های دیجیتالی خود را در یک پلتفرم ابری شخص ثالث ذخیره کرده و به آنها دسترسی داشته باشید.

دارایی های رسانه ای مانند تصاویر برای ایجاد یک تجربه کاربری عالی برای هر برنامه وب ضروری هستند. خدمات میزبانی تصویر آپلود، ذخیره، بازیابی و مدیریت دارایی های خود را از فضای ابری برای شما آسان می کند، در نتیجه با تضمین زمان بارگذاری سریع تر و کیفیت تصویر بهتر، عملکرد برنامه شما را افزایش می دهد.

ابری چیست؟

Cloudinary یک پلت فرم مدیریت رسانه مبتنی بر ابر است. این ویژگی‌ها را فراهم می‌کند که آپلود، ذخیره و مدیریت دارایی‌های رسانه دیجیتال مانند تصاویر و ویدیوها را برای شما آسان می‌کند. اساساً، Cloudinary مدیریت تمام رسانه های دیجیتالی مورد نیاز برای هر برنامه کاربردی را از یک پلت فرم آسان تر می کند.

یک پروژه ابری برای میزبانی فایل های تصویری راه اندازی کنید

برای شروع آپلود و میزبانی فایل های تصویری، برای یک حساب کاربری Cloudinary ثبت نام کنید.

وارد داشبورد حساب خود شوید و روی تب نماد تنظیمات در منوی سمت چپ کلیک کنید.

در صفحه تنظیمات، روی دکمه آپلود کلیک کنید تا صفحه تنظیمات آپلود باز شود.

اکنون به بخش تنظیمات آپلود پیش‌تنظیمات بروید و روی Add upload preset کلیک کنید تا یک پیش‌تنظیم آپلود جدید برای برنامه خود ایجاد کنید.

یک آپلود پیش‌تنظیمی پیکربندی پارامترهایی است که ساختار پیش‌فرض هر فایل رسانه‌ای را که در Cloudinary آپلود می‌کنید، تعریف می‌کند. آنها به شما اجازه می دهند تا هر بار که یک فایل رسانه ای را آپلود می کنید، مجموعه ای از قوانین را تعریف کنید.

پارامترهای از پیش تعیین شده تضمین می کنند که Cloudinary تمام فایل های رسانه ای را برای تحویل به برنامه شما بهینه می کند و عملکرد را بهبود می بخشد و زمان بارگذاری را کاهش می دهد.

نام از پیش تعیین شده خود را وارد کنید و حالت بدون امضا را از منوی کشویی نمایش داده شده انتخاب کنید. حالت‌های امضا به شما این امکان را می‌دهند که روش‌هایی را که Cloudinary برای احراز هویت و مجوز هر بارگذاری رسانه استفاده می‌کند، مشخص کنید.

انتخاب حالت بدون امضا به شما امکان می‌دهد بدون احراز هویت با Cloudinary، از برنامه‌هایتان در فضای ذخیره‌سازی کلودیناری خود آپلود کنید. به عبارت ساده، این حالت به شما امکان می دهد یک تصویر را انتخاب کنید، و آن را مستقیماً از برنامه خود آپلود کنید. سپس کلودیناری در صورت درخواست آن را تحویل خواهد داد.

پس از انجام این تغییرات، ادامه دهید و روی ذخیره کلیک کنید تا پیش تنظیم آپلود ایجاد شود.

یک برنامه Demo React ایجاد کنید

می‌توانید یک برنامه ساده React راه‌اندازی کنید تا با استفاده از نقطه پایانی Clodinary API و ابزارک آپلود، عملکرد آپلود را مدیریت کند.

برای شروع، یک برنامه React دمو ایجاد کنید. سپس، دستور زیر را اجرا کنید تا سرور توسعه را چرخانده و برای مشاهده نتایج به http://localhost:3000 در مرورگر خود بروید.

npm start

سپس، این دستور را برای نصب Axios، یک کتابخانه جاوا اسکریپت که برای درخواست HTTP از مرورگر استفاده می شود، اجرا کنید.

npm install axios

آپلود فایل های تصویری با استفاده از Clodinary API Endpoint

پس از راه‌اندازی برنامه React، یک مؤلفه آپلود ایجاد کنید که یک درخواست POST به نقطه پایانی Clodinary’s API برای آپلود فایل‌های تصویری در فضای ذخیره‌سازی ابری Cloudinary ارسال می‌کند. سپس پاسخ API را برای نمایش تصویر آپلود شده تخریب خواهید کرد.

یک کامپوننت آپلود ایجاد کنید

در پوشه /src، یک پوشه جدید ایجاد کنید و نام آن را اجزاء بگذارید. در این پوشه یک فایل جدید به نام Upload.js ایجاد کنید.

در فایل Upload.js کد زیر را اضافه کنید:

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;

این چیزی است که کد آپلود انجام می دهد:

• دو حالت uploadFile و cloudinaryImage را اعلام می کند. از اینها برای ذخیره فایل آپلود شده و تصویر حاصل از کلودیناری استفاده می کند.
• فیلد ورودی به شما امکان می دهد یک فایل تصویری را از سیستم فایل دستگاه خود انتخاب کنید. وقتی فایلی را انتخاب می کنید، مقدار متغیر uploadFile را به روز می کند.
• تابع handleUpload از Axios برای ارسال درخواست پست به Cloudinary استفاده می کند. در فایل آپلود شده و از پیش تعیین شده آپلود که با حساب ابری Clodinary خود مرتبط کرده اید، عبور می کند. با کلیک بر روی دکمه ارسال، این تابع فراخوانی می شود.
• هنگامی که کد پاسخی دریافت می کند، safe_url تصویر ابری را در حالت ذخیره می کند.
• در نهایت دو بخش را رندر می کند، یکی برای آپلود فایل و دیگری برای نمایش تصویر حاصل.

مولفه upload.js را در فایل app.js خود وارد و رندر کنید. پس از انتخاب و آپلود فایل تصویر، باید پاسخی مانند این را در مرورگر خود مشاهده کنید:

به حساب Cloudinary خود بروید و روی تب Media Library کلیک کنید تا فایل آپلود شده را مشاهده کنید.

آپلود فایل های تصویری با استفاده از ابزارک ابری

ادغام ویجت Cloudinary در برنامه React شما فرآیند آپلود را به طور قابل توجهی ساده می کند. علاوه بر این، ویجت به شما امکان می دهد فایل های تصویری را از منابع مختلف مانند Dropbox آپلود کنید.

برای ادغام ویجت در برنامه React خود، ابتدا باید کتابخانه جاوا اسکریپت راه دور ویجت را در فایل index.html در پوشه عمومی / قرار دهید. تگ اسکریپت زیر را در قسمت head در فایل index.html خود اضافه کنید.

<script src="https://upload-widget.cloudinary.com/global/all.js"
 type="text/javascript"></script>

سپس، در فایل upload.js خود، تغییرات زیر را اضافه کنید:

• قلاب‌های React زیر را وارد کنید: useEffect و useRef.import {useState, useEffect, useRef} از ‘react’;
• کد زیر را اضافه کنید:    const cloudinaryRef = useRef(); const widgetRef = useRef(); useEffect(() => {        cloudinaryRef.current = window.cloudinary;        widgetRef.current = cloudinaryRef.current.createUploadWidget({            cloudName: ‘انتخاب مجدد نام ابری شما: ‘بارگیری مجدد نام”        }، (خطا، نتیجه) => {             console.log(خطا، نتیجه)        });    }، []); کد بالا با استفاده از قلاب userRef یک ارجاع به شی Cloudinary و ویجت آپلود ایجاد می کند. قلاب useEffect زمانی که مؤلفه نصب می‌شود، کد را در داخل callback اجرا می‌کند. سپس ویجت را با استفاده از نام ابری خود مقداردهی اولیه می کنید و نام از پیش تعیین شده را آپلود می کنید و نتایج و خطاهایی را که ممکن است از ویجت رخ دهد ثبت کنید.
• در نهایت، دکمه ای ایجاد کنید که با کلیک کردن، ویجت آپلود را فراخوانی و باز کند. widgetRef.current.open()} >  Apload Via Widget

import {useState, useEffect, useRef} from 'react';

    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)
        });
    }, []);

<button onClick = { () => widgetRef.current.open()} >
  Upload Via Widget
</button>

بیشترین بهره را از کلودینری ببرید

Cloudinary یک راه حل کاربر پسند ارائه می دهد که فرآیند مدیریت فایل های تصویری و سایر دارایی های رسانه را ساده می کند.

علاوه بر ارائه یک پلت فرم ذخیره سازی ابری، کلودیناری ویژگی هایی مانند تبدیل تصویر و بهینه سازی تصویر را نیز ارائه می دهد. اینها ابزارهای ضروری برای افزایش کیفیت دارایی های رسانه ای شما هستند.

منبع مقاله