Node.js でファイルのアップロードの進行状況を取得するにはどうすればよいですか?

この記事では、ファイルアップロードの進捗状況を取得するprogress-streamの使い方と、このコンポーネントを使用する際の注意点を中心に紹介します

内容概要

multerはよく使われる高速ファイルアップロードです中間部分。サーバーがファイルのアップロードの進行状況をどのように取得するかは、使用中に非常に一般的な問題です。 SF の学生の中にも、「nodejs multer でファイルのアップロードの進行状況を確認する方法はありますか?」という同様の質問をした人もいました。 》。簡単に回答した後、同じ質問を持つ学生の参考のためにここにまとめました。 multer是常用的Express文件上传中间件。服务端如何获取文件上传的进度，是使用的过程中，很常见的一个问题。在SF上也有同学问了类似问题《nodejs multer有没有查看文件上传进度的方法？》。稍微回答了下，这里顺便整理出来，有同样疑问的同学可以参考。

下文主要介绍如何利用progress-stream

以下では、ファイルアップロードの進捗状況を取得するためのprogress-streamの使い方と、このコンポーネントを使用する際の注意点を中心に紹介します。

ファイルのアップロードの進行状況を取得するには、progress-stream を使用します

サーバー側でアップロードの進行状況を取得したいだけの場合は、次のコードを試すことができます。このモジュールは Express と multer に強くバインドされておらず、独立して使用できることに注意してください。

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

アップロードされたファイルの実際のサイズを取得する方法

マルチパートタイプの場合、ファイルの実際のサイズを取得するには長さをリッスンする必要があります。 (公式ドキュメントでは conviction イベントが使用されていますが、実際には問題があります)

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

3. progress-stream の実際のファイルサイズの取得に関するバグについて?

マルチパート ファイルのアップロードの場合、進行状況ストリーム インスタンスが初期化されるとき、パラメーターの長さは非数値型を渡す必要があります。そうでない場合、取得する進行状況は常に 0 になり、最終的には 100 に直接ジャンプします。

なぜこれが起こるかについては、progress-steram モジュールのバグであるはずです。モジュールのソース コードを見てください。長さが数値型の場合、コードは直接スキップされるため、長さは常に 0 とみなされます。

rreee

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

vux がプルアップ更新関数を実装する方法

vue でメソッド間の呼び出しを実装する方法

vue で element-ui の Upload アップロード コンポーネントを使用する方法

🎜

以上がNode.js でファイルのアップロードの進行状況を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。