كيفية استضافة ملفات الصور على Cloudinary في تطبيق React

تعتمد العديد من التطبيقات على الويب في محتواها. من خلال استضافة أصول الصور على نظام أساسي سحابي تابع لجهة خارجية ، يمكنك التأكد من أن تطبيقاتك تتمتع بوصول سريع وفعال إليها.

علاوة على ذلك ، سوف تتجنب تكاليف التخزين والنطاق الترددي التي تتحملها لاستضافة الأصول باستخدام خوادم داخل الشركة. هذا هو السبب في أن الحلول السحابية لاستضافة الصور مثل Cloudinary أصبحت شائعة بشكل متزايد.

تابع معنا لمعرفة كيفية استخدام Cloudinary لاستضافة أصول الصور الخاصة بك.

ما هي استضافة الصور ولماذا هي مهمة؟

استضافة الصور هي نوع من خدمات استضافة الويب التي تتيح لك تخزين أصول الصور الخاصة بك أو غيرها من الوسائط الرقمية والوصول إليها على نظام أساسي سحابي تابع لجهة خارجية.

تعتبر الأصول الإعلامية مثل الصور ضرورية لخلق تجربة مستخدم رائعة لأي تطبيق ويب. تسهل لك خدمات استضافة الصور تحميل الأصول وتخزينها واستردادها وإدارتها من السحابة ، وبالتالي ، تحسين أداء تطبيقك من خلال ضمان أوقات تحميل أسرع وصورة أفضل جودة.

ما هو السحب؟

Cloudinary عبارة عن منصة إدارة وسائط قائمة على السحابة. يوفر ميزات تسهل عليك تحميل وتخزين وإدارة أصول الوسائط الرقمية مثل الصور ومقاطع الفيديو. بشكل أساسي ، تسهل Cloudinary إدارة جميع الوسائط الرقمية اللازمة لأي تطبيق من منصة واحدة.

قم بإعداد مشروع Cloudinary لاستضافة ملفات الصور

لبدء تحميل واستضافة ملفات الصور ، قم بالتسجيل في ملف سحابة حساب.

قم بتسجيل الدخول إلى لوحة معلومات حسابك وانقر فوق علامة التبويب رمز الإعدادات في جزء القائمة الأيسر.

في صفحة الإعدادات ، انقر فوق رفع زر لفتح صفحة إعدادات التحميل.

الآن ، توجه إلى تحميل الإعدادات المسبقة قسم الإعدادات وانقر فوق إضافة تحميل مسبق لإنشاء إعداد مسبق جديد للتحميل لتطبيقك.

الإعداد المسبق للتحميل هو تكوين للمعلمات التي تحدد الهيكل الافتراضي لأي ملف وسائط تقوم بتحميله على Cloudinary. إنها تتيح لك تحديد مجموعة من القواعد لتطبيقها في كل مرة تقوم فيها بتحميل ملف وسائط.

تضمن المعلمات المحددة مسبقًا أن Cloudinary تعمل على تحسين جميع ملفات الوسائط لتسليمها إلى تطبيقك ، وتحسين الأداء وتقليل وقت التحميل.

املأ اسم الإعداد المسبق وحدد غير موقعة الوضع من القائمة المنسدلة المعروضة. تسمح لك أوضاع التوقيع بتحديد الطرق التي يستخدمها Cloudinary للمصادقة على أي تحميلات وسائط وترخيصها.

سيمكنك تحديد الوضع غير الموقع من إجراء عمليات تحميل إلى التخزين Cloudinary من تطبيقاتك دون المصادقة مع Cloudinary. ببساطة ، يتيح لك هذا الوضع تحديد صورة وتحميلها مباشرة من تطبيقك. ثم ستقوم Cloudinary بتسليمها عند الطلب.

بعد إجراء هذه التغييرات ، امض قدمًا وانقر يحفظ لإنشاء الإعداد المسبق للتحميل.

قم بإنشاء تطبيق تجريبي

يمكنك إعداد تطبيق React بسيط للتعامل مع وظائف التحميل باستخدام نقطة نهاية Cloudinary API وأداة التحميل.

للبدء، إنشاء تطبيق تجريبي React. بعد ذلك ، قم بتشغيل الأمر أدناه لتدوير خادم التطوير والانتقال إلى http://localhost: 3000 على متصفحك لعرض النتائج.

بدء npm

بعد ذلك ، قم بتشغيل هذا الأمر لتثبيت Axios ، وهي مكتبة JavaScript تُستخدم لإجراء طلبات HTTP من المستعرض.

npm تثبيت أكسيوس

تحميل ملفات الصور باستخدام Cloudinary API Endpoint

بعد إعداد تطبيق React ، قم بإنشاء مكون تحميل يقوم بإجراء طلب POST إلى نقطة نهاية API الخاصة بـ Cloudinary لتحميل ملفات الصور على التخزين السحابي Cloudinary. ستقوم بعد ذلك بتدمير استجابة API لعرض الصورة التي تم تحميلها.

قم بإنشاء مكون تحميل

في الدليل / src ، قم بإنشاء مجلد جديد وقم بتسميته ، المكونات. في هذا المجلد ، قم بإنشاء ملف جديد ، Upload.js.

في ملف Upload.js ، أضف الرمز أدناه:

يستورد رد فعل ، {useState} من'تتفاعل';
يستورد أكسيوس من"أكسيوس";
وظيفةرفع() {
مقدار ثابت [uploadFile، setUploadFile] = useState ("");
مقدار ثابت [cloudinaryImage، setCloudinaryImage] = useState ("")
مقدار ثابت handleUpload = (ه) => {
 e.preventDefault () ؛
مقدار ثابت FormData = جديد بيانات النموذج ()؛
 formData.append ("ملف"، رفع ملف)؛
 formData.append ("upload_preset", "اسم الإعداد المسبق للتحميل الخاص بك");
 Axios.post (
" https://api.cloudinary.com/v1_1/your اسم سحابة Cloudinary / صورة / تحميل ",
 بيانات النموذج
 )
 .ثم((إجابة) => {
وحدة التحكم.log (استجابة) ؛
 setCloudinaryImage (response.data.secure_url) ،
 })
 .يمسك((خطأ) => {
وحدة التحكم.log (خطأ) ؛
 });
 };
يعود ( 
"برنامج"> 
"الجهه اليسرى"> 


 تحميل الصور إلى Cloudinary Cloud Storage </h3>


"ملف"
 onChange = {(event) => {setUploadFile (event.target.files [0]);}} 
 />
 </div>
 تحميل ملف </button>
 </form> 
 </section>
"الجانب الأيمن">
سيتم عرض الصورة الناتجة هنا </h3>
 {cloudinaryImage && ( <IMGsrc={cloudinaryImage} /> )}
 </section>
 </div>
 );
} 
يصدّرتقصير رفع؛

إليك ما يفعله رمز التحميل:

• تعلن دولتين ، رفع ملف و صورة سحابية. يستخدمها لتخزين الملف الذي تم تحميله والصورة الناتجة من Cloudinary.
• يسمح لك حقل الإدخال بتحديد ملف صورة من نظام ملفات جهازك. عند تحديد ملف ، يتم تحديث قيمة المتغير uploadFile.
• ال مقبض تستخدم الوظيفة Axios لتقديم طلب نشر إلى Cloudinary. يمر في الملف الذي تم تحميله وإعداد التحميل المسبق الذي قمت بربطه بحساب Cloudinary الخاص بك. النقر فوق زر الإرسال يستدعي هذه الوظيفة.
• عندما يتلقى الرمز ردًا ، فإنه يخزن ملف عنوان_ URL الآمن الصورة السحابية في الحالة.
• أخيرًا ، يعرض قسمين ، أحدهما لتحميل الملف والآخر لعرض الصورة الناتجة.

قم باستيراد وعرض مكون upload.js في ملف app.js الخاص بك. من المفترض أن ترى ردًا مثل هذا في متصفحك بمجرد تحديد ملف الصورة وتحميله:

توجه إلى حساب Cloudinary الخاص بك ، وانقر فوق مكتبة الوسائط علامة التبويب لعرض الملف الذي تم تحميله.

يعمل دمج عنصر واجهة المستخدم Cloudinary في تطبيق React الخاص بك على تبسيط عملية التحميل بشكل كبير. بالإضافة إلى ذلك ، تتيح لك الأداة تحميل ملفات الصور من مصادر مختلفة ، مثل Dropbox.

لدمج الأداة في تطبيق React الخاص بك ، أولاً ، تحتاج إلى تضمين مكتبة JavaScript البعيدة للأداة في ملف index.html في الدليل / public. أضف علامة البرنامج النصي أدناه في قسم الرأس في ملف index.html.

<النصيsrc=" https://upload-widget.cloudinary.com/global/all.js"
 اكتب = "text / javascript">النصي>

بعد ذلك ، في ملف upload.js الخاص بك ، أضف إجراء التغييرات التالية:

• قم باستيراد ما يلي رد فعل الخطافات: useEffect and useRef.

  يستورد {useState ، useEffect ، useRef} من'تتفاعل';

• أضف الكود أدناه:

  مقدار ثابت cloudinaryRef = useRef () ،
  مقدار ثابت widgetRef = useRef () ،
   useEffect (() => {
   cloudinaryRef.current = نافذة او شباك.cloudinary؛
   widgetRef.current = cloudinaryRef.current.createUploadWidget ({
   اسم السحابة: "اسم السحابة السحابية", 
   تحميل "اسم الضبط المسبق للتحميل"
   } ، (خطأ ، نتيجة) => { 
  وحدة التحكم.log (خطأ ، نتيجة)
   });
   }, []);

  يُنشئ الرمز أعلاه مرجعًا إلى كائن Cloudinary وأداة التحميل باستخدام خطاف useRef. يقوم الخطاف useEffect بتشغيل الكود داخل رد الاتصال مرة واحدة عند تحميل المكون. يمكنك بعد ذلك تهيئة الأداة باستخدام اسم السحابة الخاص بك وتحميل اسم الإعداد المسبق وتسجيل النتائج والأخطاء التي قد تحدث من عنصر واجهة المستخدم.
• أخيرًا ، قم بإنشاء زر ، عند النقر عليه ، سوف يستدعي ويفتح أداة التحميل.

   widgetRef.current.open ()}>
   تحميل عبر القطعة
  </button>

الحصول على أقصى استفادة من السحب

توفر Cloudinary حلاً سهل الاستخدام يبسط عملية إدارة ملفات الصور وأصول الوسائط الأخرى.

بصرف النظر عن توفير منصة تخزين سحابية ، تقدم Cloudinary أيضًا ميزات مثل تحويلات الصور وتحسين الصورة. هذه أدوات أساسية لتحسين جودة أصول الوسائط الخاصة بك.