التعامل مع تحميلات الملفات في النماذج باستخدام Express

كيفية إدارة تخزين ومعالجة الملفات التي تم تحميلها عبر النماذج ، في Express

هذا مثال على نموذج HTML يسمح للمستخدم بتحميل ملف:

<form method="POST" action="/submit-form" enctype="multipart/form-data">
  <input type="file" name="document" />
  <input type="submit" />
</form>

لا تنس أن تضيفenctype="multipart/form-data"إلى النموذج ، أو لن يتم تحميل الملفات

عندما يضغط المستخدم على زر الإرسال ، سيقوم المتصفح تلقائيًا بإنشاء ملفPOSTطلب إلى/submit-formURL على نفس أصل الصفحة. يرسل المستعرض البيانات المضمنة ، غير المشفرة كنموذج عاديapplication/x-www-form-urlencoded، ولكن كماmultipart/form-data.

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

يمكنك تثبيته باستخدام:

npm install formidable

ثم قم بتضمينه في ملف Node.js الخاص بك:

const express = require('express')
const app = express()
const formidable = require('formidable')

الآن ، فيPOSTنقطة النهاية في/submit-formالطريق ، نقوم بإنشاء مثيل نموذج جديد باستخدامformidable.IncomingForm():

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm()
})

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

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req, (err, fields, files) => {
    if (err) {
      console.error('Error', err)
      throw err
    }
    console.log('Fields', fields)
    console.log('Files', files)
    for (const file of Object.entries(files)) {
      console.log(file)
    }
  })
})

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

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req)
    .on('field', (name, field) => {
      console.log('Field', name, field)
    })
    .on('file', (name, file) => {
      console.log('Uploaded file', name, file)
    })
    .on('aborted', () => {
      console.error('Request aborted by the user')
    })
    .on('error', (err) => {
      console.error('Error', err)
      throw err
    })
    .on('end', () => {
      res.end()
    })
})

بغض النظر عن الطريقة التي تختارها ، ستحصل على واحد أو أكثر من كائنات Formidable.File ، والتي تمنحك معلومات حول الملف الذي تم تحميله. هذه بعض الطرق التي يمكنك الاتصال بها:

  • file.size، حجم الملف بالبايت
  • file.path، المسار الذي تمت كتابة الملف إليه
  • file.name، اسم الملف
  • file.type، نوع MIME للملف

المسار الافتراضي إلى المجلد المؤقت ويمكن تعديله إذا كنت تستمع إلى ملفfileBeginحدث:

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req)
    .on('fileBegin', (name, file) => {
        file.path = __dirname + '/uploads/' + file.name
    })
    .on('file', (name, file) => {
      console.log('Uploaded file', name, file)
    })
    //...
})

تحميل مجانيكتيب Express.js


المزيد من البرامج التعليمية السريعة: