node.js 如何使用进度条在express中上传大文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13008232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to upload large file in express with progress bar?
提问by paynestrike
Currently I am using socket.ioto upload the video with progress bar. Here is the tutorial
目前我正在使用socket.io进度条上传视频。这是教程
but Internet Explorer does not support this method, but I really need upload the video in all browsers.
但是 Internet Explorer 不支持这种方法，但我确实需要在所有浏览器中上传视频。
I checked the express documentation. Since express is based on node-formidable(which has a progress event), I think there is way to build a upload system with progress bar, right? I just don't know how!
我检查了快递文件。由于express是基于node-formidable（它有一个进度事件），我认为有办法建立一个带有进度条的上传系统，对吗？我就是不知道怎么办！
Is node-formidable IE enabled right?
是否启用了节点强大的 IE？
Any way is it possible to build a file upload system in pure espress.js with progress bar?
有什么办法可以在带有进度条的纯espress.js中构建文件上传系统？
回答by inf3rno
It can be done with the xhr.upload progress event. It is supported from html5.
它可以通过 xhr.upload 进度事件完成。它从 html5 开始支持。
For example: https://github.com/zeMirco/express-upload-progress
例如：https: //github.com/zeMirco/express-upload-progress
In php the upload information can be attached to the session, so it works with html4, maybe there is a nodejs extension for that too, I'll google it.
在 php 中，上传信息可以附加到会话中，所以它适用于 html4，也许还有一个 nodejs 扩展，我会谷歌它。
According to this: How to do upload with express in node.jsthere is a progress event in express by file upload, so you can set a variable in the session with the actual progress data, and read it with ajax from client side.
根据这个： How to do upload with express in node.js在express by file upload 中有一个progress 事件，所以你可以在session 中设置一个带有实际进度数据的变量，并从客户端用ajax 读取它。
回答by Harsh Gupta
Here is the jsfiddleusing angular js and ng-file-uploaddirective.
这是使用 angular js 和ng-file-upload指令的jsfiddle。
The jsfiddle works for images and files but to upload the videos you will have change the POST url to your server.
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>