Der Server erhält direkt den Datei-Upload-Fortschritt

Dieses Mal werde ich Ihnen den Datei-Upload--Fortschritt mitteilen, der direkt vom Server abgerufen wird. Welche Vorsichtsmaßnahmen es gibt, damit der Server den Datei-Upload-Fortschritt erhält Fall. Werfen wir einen Blick darauf.

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 die Parameterlänge bei der Initialisierung der Progress-Stream-Instanz einen nichtnumerischen Typ übergeben, sonst wird der Fortschritt angezeigt immer 0 sein. Schließlich springt es 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, überspringt der Code direkt, 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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

So verwenden Sie Datepicker

Das Datepicker-Plug-in überwacht das Eingabefeld

Detaillierte Erläuterung der Verwendung der NavigatorIOS-Komponente

Das obige ist der detaillierte Inhalt vonDer Server erhält direkt den Datei-Upload-Fortschritt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!