web-dev-qa-db-ja.com

プログレスバーを使用して大きなファイルをExpressでアップロードするにはどうすればよいですか？

現在、socket.ioを使用してプログレスバー付きの動画をアップロードしています。これがチュートリアルです

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-resumable-video-uploade-in-node-js/

internet Explorerはこの方法をサポートしていませんが、すべてのブラウザーにビデオをアップロードする必要があります。

エクスプレスのドキュメントを確認しました。 Expressはnode-formidable（進行状況イベントがあります）に基づいているので、進行状況バーを備えたアップロードシステムを構築する方法があると思いますよね？方法がわからない！

Node-formidable IE有効になっていますか？

プログレスバーを備えた純粋なespress.jsでファイルアップロードシステムを構築することは可能ですか？

node.jsuploadexpressprogress-bar
12
paynestrike

これは、xhr.uploadprogressイベントで実行できます。 html5からサポートされています。

例： https://github.com/zeMirco/express-upload-progress

PHPでは、アップロード情報をセッションに添付できるため、html4で機能します。おそらく、そのためのnodejs拡張機能もあります。グーグルで検索します。

これによると： node.jsでエクスプレスを使用してアップロードする方法 ファイルアップロードによるエクスプレスで進行状況イベントがあるため、実際の進行状況データを使用してセッションで変数を設定し、それを読み取ることができますクライアント側からajaxを使用します。

1
inf3rno

これが jsfiddle using angular js and ng-file-upload ディレクティブです。

Jsfiddleは画像とファイルに対して機能しますが、ビデオをアップロードするには、サーバーへのPOST urlを変更する必要があります。

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function($scope, Upload, $timeout) {
  $scope.uploadFiles = function(file, errFiles) {
    $scope.f = file;
    $scope.errFile = errFiles && errFiles[0];
    if (file) {
      file.upload = Upload.upload({
        url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
        data: {
          file: file
        }
      });

      file.upload.then(function(response) {
        $timeout(function() {
          file.result = response.data;
        });
      }, function(response) {
        if (response.status > 0)
          $scope.errorMsg = response.status + ': ' + response.data;
      }, function(evt) {
        file.progress = Math.min(100, parseInt(100.0 *
          evt.loaded / evt.total));
      });
    }
  }
}]);
.thumb {
  width: 24px;
  height: 24px;
  float: none;
  position: relative;
  top: 7px;
}

form .progress {
  line-height: 15px;
}

.progress {
  display: inline-block;
  width: 100px;
  border: 3px groove #CCC;
}

.progress div {
  font-size: smaller;
  background: orange;
  width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>


<body ng-app="fileUpload" ng-controller="MyCtrl">
  <h4>Upload on file select</h4>
  <button type="file" ngf-select="uploadFiles($file, $invalidFiles)"  ngf-max-height="1000" ngf-max-size="100MB">
    Select File</button>
  <br>
  <br> File:
  <div style="font:smaller">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
    <span class="progress" ng-show="f.progress >= 0">
          <div style="width:{{f.progress}}%"  
               ng-bind="f.progress + '%'"></div>
      </span>
  </div>
  {{errorMsg}}
</body>
1
Harsh Gupta