如何将Plupload与Node.js一起使用并显示上传的百分比？

Question

目前,我的代码有效.但是,上传文件时,不会将百分比发送回javascript代码.(我想我的服务器需要发回块百分比？)

"UploadProgress"事件在完成时只打印"0".

<script>
    $(function(){
        $("#button_holder").show();
        var uploader = new plupload.Uploader({
            runtimes : 'html5,flash,silverlight,html4',
            browse_button : 'pickfiles',
            container : 'button_holder',
            multi_selection: true,
            url : '/upload',
            flash_swf_url : '/js/plupload/js/Moxie.swf',
            silverlight_xap_url : '/js/plupload/js/Moxie.xap',
        });

        uploader.bind('FilesAdded', function(up, files) {
            $("#button_holder").hide(); 

            plupload.each(files, function(file) {
                var item = '<div class="upload_item" id="' + file.id + '">' + '<b class="percent"></b></div>' + file.name + ', ' + plupload.formatSize(file.size) + '</div>'
                $("#progress_holder").append(item);
            }); 

            uploader.start();
            return false;
        });

        uploader.bind('FileUploaded', function(uploader, file, response){
            if(response.status == 200){ 
                var icon = "<i class='fa fa-check fa-fw'></i>";
            }else{
                var icon = "<i class='fa fa-times fa-fw'></i>";
            }
            var html = '<div class="success_item">' + icon + ' ' + file.name + '</div>';
            $("#progress_holder").append(html);
        });

        uploader.bind('UploadComplete', function(uploader, files){
        });

        uploader.bind('UploadProgress', function(up, file) {
            console.log(file.percent); //just says "0"
            $("#" + file.id).first(".percent").html(file.percent + "%");
            return false;
        });
        uploader.init();
    });
</script>

这是我的后端代码:

var express = require('express');
var Pluploader = require('node-pluploader');
var ejs = require('ejs');
var bodyParser = require('body-parser')
var request = require('request');
var http = require('http');


var app = express();
app.set('views','/home/user/heaven/templates');
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true}));
app.use(bodyParser.json());
app.use(express.static('/home/user/heaven/media'));



var pluploader = new Pluploader({
  uploadLimit: 100, //MB
  uploadDir: '/home/user/heaven/uploads'
});

pluploader.on('fileUploaded', function(file, req) {
  console.log(file);
});
pluploader.on('error', function(error) {
    throw error;
});

app.post('/upload', function(req, res){
    pluploader.handleRequest(req, res);
});

app.get('/', function (req, res) {
    res.render('index', {});
});

var server = app.listen(3000, function () {
    console.log('Listening to server.');
});

Answer 1

只需将网址更改为:

url : 'http://127.0.0.1:3000/upload'

而不是以后绑定UploadProgress,在init中执行,如下所示:

var uploader = new plupload.Uploader({
            runtimes: 'html5,flash,silverlight,html4',
            browse_button: 'pickfiles',
            container: 'button_holder',
            multi_selection: true,
            url: 'http://127.0.0.1:3000/upload',
            flash_swf_url: '/js/plupload/js/Moxie.swf',
            silverlight_xap_url: '/js/plupload/js/Moxie.xap',
            init: {
                UploadProgress: function(up, file) {
                    console.log('file%: '+file.percent);

                }
            }
        });

我测试过,它适用于您的代码.同样的事情不适用于绑定,这很奇怪.我稍后会弄清楚的.

服务器代码:https://github.com/aishwat/plupload_server

客户代码:https://github.com/aishwat/plupload_client/blob/master/examples/custom.html

如果您不想使用Plupload,还有另一种使用XMLHttpRequest进度事件的方法,例如:

xhr.upload.addEventListener("progress", function (evt) {});

这是使用这种方法的node.js代码(由Rohit Kumar编写).