Comment obtenir la progression du téléchargement de fichiers dans Node.js ?

Cet article présente principalement comment utiliser progress-stream pour obtenir la progression du téléchargement de fichiers, ainsi que les précautions lors de l'utilisation de ce composant

Aperçu du contenu

multer est un middleware de téléchargement de fichiers Express couramment utilisé. La manière dont le serveur obtient la progression du téléchargement des fichiers est un problème très courant lors de l'utilisation. Certains étudiants de SF ont également posé une question similaire : « Existe-t-il un moyen de vérifier la progression du téléchargement du fichier dans nodejs multer ? » 》. Après une brève réponse, je l'ai compilé ici pour référence par les étudiants qui ont les mêmes questions.

Ce qui suit présente principalement comment utiliser progress-stream pour obtenir la progression du téléchargement du fichier, ainsi que les précautions lors de l'utilisation de ce composant.

Utilisez progress-stream pour obtenir la progression du téléchargement du fichier

Si vous souhaitez simplement obtenir la progression du téléchargement côté serveur, vous pouvez essayez le code suivant. Notez que ce module n'est pas fortement lié à Express et multer et peut être utilisé indépendamment.

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);

Comment obtenir la taille réelle du fichier téléchargé

Pour le type en plusieurs parties, vous devez écouter la longueur pour obtenir la taille réelle du fichier. (Le document officiel utilise l'événement de condamnation, ce qui est effectivement problématique)

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

3. Concernant le bug en cours-stream obtenant la taille réelle du fichier ?

Pour le téléchargement de fichiers en plusieurs parties, lorsque l'instance de flux de progression est initialisée, le paramètre length doit transmettre un type non numérique, sinon la progression que vous obtiendrez sera toujours 0, et enfin passer directement à 100 .

Quant à la raison pour laquelle cela se produit, cela devrait être un bug dans le module progress-steram. Lorsque la longueur est de type numéro, le code saute directement, donc votre longueur est toujours considérée comme égale à 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']));
    }
  });
});

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment vux implémente la fonction d'actualisation pull-up

Comment implémenter les appels entre méthodes dans vue

Comment utiliser le composant de téléchargement Upload d'element-ui dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!