ホームページ > ウェブフロントエンド > jsチュートリアル > サーバーはファイルのアップロードの進行状況を直接取得します

サーバーはファイルのアップロードの進行状況を直接取得します

php中世界最好的语言
リリース: 2018-03-23 13:42:37
オリジナル
2139 人が閲覧しました

今回はサーバーから直接取得するファイルアップロードの進行状況をご紹介します。 サーバーがファイルアップロードの進行状況を取得するための注意事項は何ですか?以下は実際のケースです。

コンテンツの概要

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 とみなされます。

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']));
    }
  });
});
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

datepickerの使用方法

datepickerプラグイン監視入力ボックス

NavigatorIOSコンポーネントの使用方法の詳細な説明

以上がサーバーはファイルのアップロードの進行状況を直接取得しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート