How to get file upload progress in Node.js?

This article mainly introduces how to use progress-stream to obtain file upload progress, as well as precautions when using this component

Content overview

multer is a commonly used Express file upload middleware. How the server obtains the progress of file upload is a very common problem during use. Some students on SF also asked a similar question "Is there a way to check the file upload progress in nodejs multer?" 》. After a brief answer, I compiled it here for reference by students who have the same questions.

The following mainly introduces how to use progress-stream to obtain the file upload progress, as well as the precautions when using this component.

Use progress-stream to get the file upload progress

If you just want to get the upload progress on the server side, you can try the following code. Note that this module is not strongly bound to Express and multer and can be used independently.

var fs = require('fs');
var express = require('express');
var multer = require('multer');
var progressStream = require('progress-stream');
var app = express();
var upload = multer({ dest: 'upload/' });
app.post('/upload', function (req, res, next) {
  // 创建progress stream的实例
  var progress = progressStream({length: '0'}); // 注意这里 length 设置为 '0'
  req.pipe(progress);
  progress.headers = req.headers;
  // 获取上传文件的真实长度（针对 multipart)
  progress.on('length', function nowIKnowMyLength (actualLength) {
    console.log('actualLength: %s', actualLength);
    progress.setLength(actualLength);
  });
  // 获取上传进度
  progress.on('progress', function (obj) {    
    console.log('progress: %s', obj.percentage);
  });
  // 实际上传文件
  upload.single('logo')(progress, res, next);
});
app.post('/upload', function (req, res, next) {
  res.send({ret_code: '0'});
});
app.get('/form', function(req, res, next){
  var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
  res.send(form);
});
app.listen(3000);

How to get the real size of the uploaded file

For multipart type, you need to listen to length to get the real size of the file. (The official document uses the conviction event, which is actually problematic)

// 获取上传文件的真实长度（针对 multipart)
progress.on('length', function nowIKnowMyLength (actualLength) {
  console.log('actualLength: %s', actualLength);
  progress.setLength(actualLength);
});

3. Regarding the bug in obtaining the real file size from progress-stream?

For multipart file upload, when the progress-stream instance is initialized, the parameter length needs to pass a non-numeric type, otherwise the progress you get will always be 0, and finally jump directly to 100 .

As for why this is happening, it should be a bug in the progress-steram module. Take a look at the source code of the module. When length is of type number, the code skips directly, so your length is always considered to be 0.

tr.on('pipe', function(stream) {
  if (typeof length === 'number') return;
  // Support http module
  if (stream.readable && !stream.writable && stream.headers) {
    return onlength(parseInt(stream.headers['content-length'] || 0));
  }
  // Support streams with a length property
  if (typeof stream.length === 'number') {
    return onlength(stream.length);
  }
  // Support request module
  stream.on('response', function(res) {
    if (!res || !res.headers) return;
    if (res.headers['content-encoding'] === 'gzip') return;
    if (res.headers['content-length']) {
      return onlength(parseInt(res.headers['content-length']));
    }
  });
});

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How vux implements the pull-up refresh function

How to implement calls between methods in vue

How to use the Upload component of element-ui in vue

The above is the detailed content of How to get file upload progress in Node.js?. For more information, please follow other related articles on the PHP Chinese website!