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

Question

Currently, my code works. However, when a file is uploaded, no percentages are sent back to the javascript code. (I guess my server needs to send the chunk percentage back?)

The "UploadProgress" event just prints "0" when it's complete.

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

This is my backend code:

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

Just change url to:

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

and instead of binding UploadProgress later, do it in init, like this:

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

                }
            }
        });

I tested, it works in your code. The same thing doesn't work with bind, which is quite weird. I'll figure it out later.

Server code: https://github.com/aishwat/plupload_server

Client code: https://github.com/aishwat/plupload_client/blob/master/examples/custom.html

And if you don't want to use Plupload, there's another way using XMLHttpRequest progress event, something like:

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

Here's the node.js code using this approach (written by Rohit Kumar ).