【问题标题】:node-formidable and a simple progress bar强大的节点和简单的进度条
【发布时间】:2016-11-10 16:48:25
【问题描述】:

如果我查看我可以阅读的节点强大的文档:

"Event: 'progress' (bytesReceived, bytesExpected)
Emitted after each incoming chunk of data that has been parsed. 
Can be used to roll your    own progress bar."

我想知道如何实现我自己的进度条我的意思是如何在客户端读取该信息?我很困惑。它是通过在 POST 开始后启动的轮询 GET 实现的,还是可以在上传时从 POST 请求中读取信息?

如果我看这个:

http.createServer(function(req, res) {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // parse a file upload
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('received upload:\n\n');
      res.end(sys.inspect({fields: fields, files: files}));
    });
    return;
  }

看起来 /upload url 正在处理 POST 请求并返回一些内容 res.write('received upload:\n\n');

我的问题是谁能读懂它

res.write('received upload:\n\n');

【问题讨论】:

    标签: node.js


    【解决方案1】:

    您不需要覆盖 onPart 挂钩!

    只需在每个表单progress 事件回调调用中通过套接字广播一条消息,如下所示:

    form.on('progress', function(bytesReceived, bytesExpected) {
      var progress = {
        type: 'progress',
        bytesReceived: bytesReceived,
        bytesExpected: bytesExpected
      };
    
      socket.broadcast(JSON.stringify(progress));
    });
    

    比在客户端监听套接字消息。

    【讨论】:

    • @Giovanni 您能否给我们举一些服务器端和客户端的例子来说明如何滚动自己的进度条?
    【解决方案2】:

    一个不错的选择可能是使用socket.io

    记得覆盖onPart 钩子。

    incomingForm.onPart = function(part) {
      part.addListener('data', function() {
        // send back to the client the status
      });
    }
    

    【讨论】:

    • 所以你建议在整个上传过程中用服务器端的 Socket.IO-node 替换 node-formidable?
    • ...我明白了。客户端向一个强大的节点发出 POST 请求,然后启动一个与 Socket.IO 节点的 socket.io 会话。在节点强大的接收的每一部分,它都会对广播给所有客户端的 Socket.IO-node 进行回调。客户端只需要过滤有关其自己文件的消息。像这样?
    • 这可能是一个选项。另一种可能是在服务器端存储进度(db、json 文件),客户端通过轮询来请求它。
    【解决方案3】:

    比如说,你正在通过 AJAX 上传一些东西,那么你只需要在客户端绑定一个回调到 xhr.upload.onprogress

    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) {
        console.log(`${e.loaded} out of ${e.total} bytes have been uploaded`)
      }
    }
    

    服务器端不需要任何东西。有关注入点的完整列表,请参阅 here。还有教程here

    【讨论】:

      猜你喜欢
      • 2014-06-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-19
      • 1970-01-01
      • 1970-01-01
      • 2015-03-22
      相关资源
      最近更新 更多