كيفية السماح للمستخدمين بتحميل الصور باستخدام Node / Express و Mongoose و Cloudinary

تصوير ماهر أوسال على Unsplash

هل تنشئ تطبيقًا مكتملًا وتريد السماح للمستخدمين بتحميل صورة لكنك غير متأكد من ذلك؟ في تجربتي ، يتم تحقيق ذلك دائمًا من خلال جعل المستخدمين يقومون بإدخال رابط وحفظ هذه السلسلة في قاعدة البيانات الخاصة بك. هذا أمر رائع وسريع وسريع ، لكنه أيضًا نوع من الغش. ما نوع التطبيق الذي يجعلك تذهب أولاً إلى موقع آخر وتحميل صورتك ، ثم تعود وتربط به؟

إذن ما هو الحل؟

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

دعنا نبدأ في الواجهة الأمامية

  <نوع الإدخال = 'file' name = 'image' />

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

هذه هي الواجهة الأمامية التي تم حلها.

الخلفية

الآن ، الخلفية هي حيث يحدث كل السحر. ستحتاج إلى كل التبعيات المعتادة للعمل مع Express و Mongoose. بالإضافة إلى ذلك ، سوف نستخدم Multer و Cloudinary و multer-storage-cloudinary. سوف Multer تسمح بالوصول إلى الملفات المقدمة من خلال النموذج. يستخدم Cloudinary للتكوين والتحميل. سوف multer-storage-cloudinary تجعل عملية الجمع بين هذه سهلة.

const multer = require ("multer") ؛
const cloudinary = require ("cloudinary") ؛
const cloudinaryStorage = require ("multer-storage-cloudinary")؛

مرة واحدة مطلوبة التبعيات تحتاج إلى تكوينها. عند التسجيل في Cloudinary ، سيتم تزويدك ببيانات اعتماد API الخاصة بك. أوصي بتخزينها في ملف ".env" للحفاظ عليها آمنة.

أدناه نحن أيضا:

  • إعداد مجلد للاحتفاظ بجميع الصور منظمة على Cloudinary لهذا المشروع
  • ضمان تحميل ملفات ".jpg" و ".png" فقط
  • إضافة تحول للحفاظ على الطول والعرض متناسقين ولإدارة حجم الملف.

هناك الكثير الذي يمكنك القيام به فيما يتعلق بالتحولات - يمكنك إلقاء نظرة هنا إذا كنت مهتمًا.

cloudinary.config ({
cloud_name: process.env.CLOUD_NAME ،
api_key: process.env.API_KEY ،
api_secret: process.env.API_SECRET
})؛
تخزين const = cloudinaryStorage ({
سحابة: سحابة
المجلد: "التجريبي" ،
سمح للتنسيقات: ["jpg" ، "png"] ،
التحويل: [{العرض: 500 ، الارتفاع: 500 ، المحصول: "الحد"}]
})؛
محلل const = multer ({storage: storage}) ؛

الآن وقد تم إعداد الخادم الخاص بك لتلقي هذه الصور ومعالجتها ، يمكننا الانتقال إلى إعداد المسار.

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

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

  • عنوان URL الذي يمكن استخدامه لعرض الصورة على الواجهة الأمامية
  • public_id والذي سيسمح لك بالوصول وحذف الصورة من Cloudinary.
app.post ('/ api / images' ، parser.single ("image") ، (req، res) => {
  console.log (req.file) // لمعرفة ما يتم إرجاعه إليك
  صورة const = {}؛
  image.url = req.file.url؛
  image.id = req.file.public_id؛
  Image.create (صورة) / / حفظ معلومات الصورة في قاعدة البيانات
    .then (newImage => res.json (newImage))
    .catch (err => console.log (err)) ؛
})؛

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

* الصورة هي عنصر نائب مثال لمجموعة قاعدة البيانات الخاصة بك. استبدلها بنفسك.

عرض الصورة

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

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

إذا كان لديك أي أسئلة ، يرجى طرحها في التعليقات.