使用ExpressJS Multer时的XHR上传进度

Question

使用ExpressJS Multer时的XHR上传进度

node.jsexpressuploadxmlhttprequestmulter

8

我正在尝试使用XHR来跟踪上传进度，但是在我的onprogress回调中，event.total只返回响应头中的Content-Length而不是上传文件的大小：

xhr.onprogress = (event) => {
  console.log('Progress ' + event.loaded + '/' + event.total);
}

我使用Multer来处理文件上传，但似乎默认情况下它不支持文件上传：https://github.com/expressjs/multer/issues/243 因此我尝试使用progress-stream来处理上传：

  var p = progress({ time: 1 });
  request.pipe(p);

  p.on('progress', function() {
    console.log('Progress...');
  });

但是它工作的方式相同，我只在日志中获得了一个“进度...”，在XHR onprogress事件.total中，我只有Content-Length值而不是文件大小值。帮帮我，我不知道如何解决它！

- user1341315

嘿，@user1341315，如果我的回答对你有帮助，请接受它。如果不是，请在你的问题中添加更多细节。 - danilodeveloper

你好 @danilodeveloper，谢谢！问题在于我使用了xhr.onprogress而不是xhr.upload.onprogress。 - user1341315

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- danilodeveloper · Accepted Answer

如果您想显示进度条，就不需要在后端获取进度信息，您只需要知道从前端发送到后端的数据，这样您就可以计算上传进度。

在您的前端 .js 或 .html 中，尝试使用以下代码：

var formData = new FormData();
var file = document.getElementById('myFile').files[0];
formData.append('myFile', file);
var xhr = new XMLHttpRequest();

// your url upload
xhr.open('post', '/urluploadhere', true);

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    var percentage = (e.loaded / e.total) * 100;
    console.log(percentage + "%");
  }
};

xhr.onerror = function(e) {
  console.log('Error');
  console.log(e);
};
xhr.onload = function() {
  console.log(this.statusText);
};

xhr.send(formData);

在后端，您只需要像这样一个简单的端点：

app.post('/urluploadhere', function(req, res) {
  if(req.files.myFile) {
    console.log('hey, Im a file and Im here!!');
  } else {
    console.log('ooppss, may be you are running the IE 6 :(');
  }
  res.end();
});

Multer也是必需的，记住，xhr仅适用于现代浏览器。