Le serveur obtient directement la progression du téléchargement du fichier

Cette fois, je vais vous apporter la progression du téléchargement du fichier directement obtenue depuis le serveur. Quelles sont les précautions pour que le serveur obtienne la progression du téléchargement du fichier. cas. Jetons un coup d'oeil.

Présentation 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, la longueur du paramètre doit transmettre un type non numérique, sinon la progression que vous obtiendrez sera être toujours 0. Enfin, il passe 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']));
    }
  });
});

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le sujet. Site Web chinois PHP !

Lecture recommandée :

Comment utiliser datepicker

Le plug-in datepicker surveille la zone de saisie

Explication détaillée de l'utilisation du composant NavigatorIOS

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!