Wie erhalte ich den Datei-Upload-Fortschritt in Node.js?

In diesem Artikel wird hauptsächlich die Verwendung von Progress-Stream zum Abrufen des Datei-Upload-Fortschritts sowie Vorsichtsmaßnahmen bei der Verwendung dieser Komponente vorgestellt

Inhaltsübersicht

multer ist eine häufig verwendete Express-Datei-Upload-Middleware. Wie der Server den Fortschritt des Datei-Uploads erhält, ist ein sehr häufiges Problem während der Verwendung. Einige SF-Studenten stellten auch eine ähnliche Frage: „Gibt es eine Möglichkeit, den Datei-Upload-Fortschritt in NodeJS Multer zu überprüfen?“ 》. Nach einer kurzen Antwort habe ich es hier als Referenz für Studierende zusammengestellt, die die gleichen Fragen haben.

Im Folgenden wird hauptsächlich die Verwendung von progress-stream zum Abrufen des Datei-Upload-Fortschritts sowie die Vorsichtsmaßnahmen bei der Verwendung dieser Komponente vorgestellt.

Verwenden Sie Progress-Stream, um den Datei-Upload-Fortschritt abzurufen

Wenn Sie nur den Upload-Fortschritt auf der Serverseite abrufen möchten, können Sie dies tun Probieren Sie den folgenden Code aus. Beachten Sie, dass dieses Modul nicht stark an Express und Multer gebunden ist und unabhängig verwendet werden kann.

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

So ermitteln Sie die tatsächliche Größe der hochgeladenen Datei

Beim Multipart-Typ müssen Sie auf die Länge achten, um die tatsächliche Größe der Datei zu ermitteln. (Das offizielle Dokument verwendet das Überzeugungsereignis, was tatsächlich problematisch ist)

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

3 Bezüglich des Fehlers im Progress-Stream beim Ermitteln der tatsächlichen Dateigröße?

Beim mehrteiligen Datei-Upload muss bei der Initialisierung der Progress-Stream-Instanz die Parameterlänge einen nicht numerischen Typ übergeben, andernfalls ist der Fortschritt, den Sie erhalten, immer 0 und schließlich Springe direkt auf 100 .

Was den Grund dafür betrifft, dass es sich um einen Fehler im Progress-Steram-Modul handelt, schauen Sie sich den Quellcode des Moduls an. Wenn die Länge vom Typ Zahl ist, wird der Code direkt übersprungen, sodass Ihre Länge immer als 0 betrachtet wird.

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']));
    }
  });
});

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Wie Vux die Pull-up-Refresh-Funktion implementiert

So implementieren Sie Aufrufe zwischen Methoden in Vue

So verwenden Sie die Upload-Upload-Komponente von element-ui in Vue

Das obige ist der detaillierte Inhalt vonWie erhalte ich den Datei-Upload-Fortschritt in Node.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!