إظهار نسبة التحميل عند رفع الملفات باستخدام multer في node.js

يمكن استخدام الحزمة progress-stream وتتطلب تعديل طفيف بالشيفرة لتصبح كاالتالي:

var p = progress()
var upload = multer().single('file')

req.pipe(p)
p.headers = req.headers

p.on('progress', _)
upload(p, res, _)

حيث يتم ربط progress مع مع الملف المراد رفعه.

_________

إن كان العرض مطلوب لدى المستخدم، يمكن عمل متتبع ضمن Front End:

// تجهيز البيانات و الملف للإرسال
var formData = new FormData();
var file = document.getElementById('myFile').files[0];
formData.append('myFile', file);
var xhr = new XMLHttpRequest();

// تجهيز رابط رفع الملف
xhr.open('post', '/urluploadhere', true);

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    // تحريك المؤشر كلما تم الإنتهاء من جزء من الملف بطول ذلك الجزء
    var percentage = (e.loaded / e.total) * 100;
    console.log(percentage + "%");
  }
};
// معالجة خطأ
xhr.onerror = function(e) {
  console.log('Error');
  console.log(e);
};
// ربط التحميل مع الدالة 
xhr.onload = function() {
  console.log(this.statusText);
};
// الإرسال
xhr.send(formData);

يمكنك ببساطة استخدام برمجية وسيطة لتتبع تقدم تحميل الملف.

نحن نستخدم هذه البرمجيات الوسيطة قبل multer's middleware.
من خلال هذه البرامج الوسيطة ، قمنا بتعيين مستمع حدث لكائن req لتتبع تقدم التحميل. ثم ندعو next لاستدعاء البرمجيّة الوسيطة التالية (Multer).

مثال:

const multer = require('multer');
const upload = multer({dest:'./tmp',limits: {fileSize: 4*1024*1024}});

function progress_middleware(req, res, next){
    let progress = 0;
    const file_size = req.headers["content-length"];
    
    // تعيين مستمع الحدث
    req.on("data", (chunk) => {
        progress += chunk.length;
        const percentage = (progress / file_size) * 100;
        // other code ...
    });

    // استدعاء البرمجيات الوسيطة التالية
    next();
}
// إنتظار طلب تحميل الملف
router.post('/upload', progress_middleware, upload.single('upload'), (req,res) => {
 console.log(req.file);
});

في الحقيقة الأحسن ان لا تطبق هذا من السيرفر وفقط تقف عند منطق التحميل فقط ال progress يفضل تطبيقه من الواجهة لأنه هناك أشياء مساعدة وأيضا ليس مكلف وسريع في axios مثلا مجهز ب  onUploadProgress وهي ملائمة جدا لهكذا خاصية 

  const [selectedFiles, setSelectedFiles] = useState([])
  const [progress, setProgress] = useState()
  const submitHandler = e => {
    e.preventDefault() 
    let formData = new FormData()
    formData.append("file", selectedFiles[0])
    axiosInstance.post("/upload_file", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
      onUploadProgress: data => {
        //progress تحديث ال 
        setProgress(Math.round((100 * data.loaded) / data.total))
      },
    })
  }