The server directly obtains the file upload progress

This time I will bring you the server-side direct access to the file upload progress . What are the precautions for the server-side to obtain the file upload progress? The following is a practical case, let’s take a look. .

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 initializing the progress-stream instance, the parameter length needs to pass a non-numeric type, otherwise the progress you get will always be 0. Finally, it jumps 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']));
    }
  });
});

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use datepicker

datepicker plug-in monitor input box

Detailed explanation of the use of NavigatorIOS component

The above is the detailed content of The server directly obtains the file upload progress. For more information, please follow other related articles on the PHP Chinese website!