javascript - 通过javascript计算服务器上上传的数据

Question

我正在尝试通过 Ajax (XMLHttpRequest) 在服务器上上传大量数据(不是文件)，我需要在服务器上计算上传的数据。我正在使用下面的代码:

var formData = new FormData();
var xhr = new XMLHttpRequest();

formData.append('supplierListing', JSON.stringify(excelPostData));

formData.append('jobName', document.getElementById('jobNameInput').value);

formData.append('additionalHeader', addHeader);

xhr.open('post', '/primeChoice/sheet', true);

xhr.onprogress = function (e) {
  clearInterval (counterInt);
  document.getElementById ('uploadCounter').innerHTML = Math.floor((e.loaded / e.total) * 100) + '%';
}

xhr.onloadstart = function (e) {
  document.getElementById ('uploadCounter').innerHTML = '0%';
}  

xhr.onreadystatechange = function (aEvt) {
  if (xhr.readyState === 4) {
    if(xhr.status === 200) {
      document.getElementById("progressBar").style.display = "none";
      document.getElementById("uploadSheetStatus").style.display = "block";
      setTimeout(function() {
        location.reload();
      },3000);
    }
  }
}

xhr.onerror = function(e) {
  showInfo('An error occurred while submitting the form.');
};  

xhr.onload = function() {
  showInfo(this.statusText);
};

xhr.send(formData);

当我执行此代码时，我仅得到 0%、85%、100% 的响应。而它应该像增加进度数字，如 0%、1%、2%、....、100%。

意味着，执行调用很长一段时间不会从“onloadstart”事件重定向到“onprogress”事件，并且长时间显示“0%”进度。但是当编译器达到“onprogress”状态/事件时，它仅显示 2 个响应，即 85% 和 100%。

如何改进此流程以便实时获取上传的数据大小？

Answer 1

我努力解决这个问题。仅通过 Javascript 无法解决此问题。你必须使用套接字编程。它将有助于在运行时显示结果。让我解释一下我的答案节点.js

const express = require('express');
let server =  app.listen(app.get('port'), () => {
  console.log('%s App is running at http://localhost:%d in %s mode', chalk.green('✓'), app.get('port'), app.get('env'));
});

var io = require('socket.io').listen(server);
io.sockets.on('connection', function (socket) {
  socket.send('Sent a message 4seconds after connection!');    
  console.log(' %s sockets connected', io.engine.clientsCount);    
  socket.on('disconnect', function() {
      console.log("disconnect: ", socket.id);
  });
});

app.set('socketio', io);

在我的 Controller 中，

var io = req.app.get('socketio');
connection.query('INSERT INTO [MY TABLE NAME] SET ?', row, function (error, results, fields) {
            if (error)
                throw error;

            let percentage =  parseInt (Math.ceil ((i/sheetData.length)*100));
            io.sockets.emit('progressBar',{ progressPercentage: (percentage > 100) ? 100 : percentage, user: row.user});
        });

在 Jade / View 中，

var socket = io();

socket.on('connect', function () {
  socket.on('message',function(data) {
    console.log (data);
  });
  socket.on('progressBar',function(data) {
    document.getElementById ('uploadCounter').innerHTML = null;
    document.getElementById ('uploadCounter').innerHTML = data.progressPercentage + '%';
  });
});

我相信这种方法将帮助您在运行时显示上传进度。