将 CSV 文件从浏览器发送到 nodejs 服务器

Question

我正在尝试将用户上传的 csv 文件从浏览器发送到 nodejs 服务器进行处理（文件超过 50 mb，因此页面变得无响应）。我为此目的使用 XMLHttpRequest。我找不到解决方案。任何帮助表示赞赏。

Javascript 代码

 var csv = document.getElementById('inputFile').files[0];
 var request = new XMLHttpRequest();
 request.open("POST", "/handleFile", true);
 request.setRequestHeader("Content-type", "text/csv");
 request.onreadystatechange = function() {
   if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
     console.log("yey");
   }
 }

 request.send(csv);

NodeJS 服务器

 var express = require('express')
 var app = express()
 var bodyparser = require('body-parser')

 app.post('/handleFile', function(req, res) {
   console.log(req.body); // getting {} empty object here....
   console.log(req);

   var csv = req.body;
   var lines = csv.split("\n");
   var result = [];
   var headers = lines[0].split("\t");

   for (var i = 1; i < lines.length; i++) {
     var obj = {};
     var currentline = lines[i].split("\t");

     for (var j = 0; j < headers.length; j++) {
       obj[headers[j]] = currentline[j];
     }

     result.push(obj);
   }

   fileData = result;
 });

我做错了什么？ XMLHttpRequest 是否使用不当？或者还有其他一些我不明白的事情？为什么 req.body 中没有数据，即使它是一个发布请求。 或者有没有其他方法可以从前端将 csv/文本文件发送到 nodejs 服务器。

这个问题不是重复的，因为 body-parser 即负责解析 req.body 的中间件不处理 text/csv 和 multipart/form-data 。上面的链接不是正确的解决方案。

Answer 1

所以，环顾四周，我发现问题不是我的 XMLHttpRequest。服务器很好地接收了请求，但正文解析器无法解析 text/csv 和 multipart/form-data 内容类型。这是这个问题的逐步答案。

1. 每当您向服务器发送大文件时，在客户端/浏览器端，将其转换为 multipart/form-data 。这是向服务器发送 text/csv/anyfile 的正确方式。

   var csv=document.getElementById('inputFile').files[0];
   var formData=new FormData();
   formData.append("uploadCsv",csv);
   var request = new XMLHttpRequest();
   
    //here you can set the request header to set the content type, this can be avoided.
    //The browser sets the setRequestHeader and other headers by default based on the formData that is being passed in the request.
    request.setRequestHeader("Content-type", "multipart/form-data"); //----(*)
    request.open("POST","/handleFile", true);
   request.onreadystatechange = function (){
       if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
       console.log("yey");
       }
   }
   
   request.send(formData);
   

所以，这就是您将 http 请求发送到 nodejs 服务器的方式。

1. 在 Node js 服务器上：通常对于 application/json 或任何其他请求类型，body-parser 可以正常工作。但是对于大数据和文件，即 multipart/form-data body-parser 无法解析 req.body。因此它将 req.body 作为 {} （空对象）。 了解 body-parser here。

因此，对于这些内容类型，您可以使用其他中间件来处理请求。有些是multer，multiparty，busboy 等。我用过multer。 这是代码片段。

    //EXPRESS
    var express = require('express')
    var app = express()

    var config=require('./config.js');
    //multer
    var multer  = require('multer');
    var upload = multer();
    app.post('/handleFile',upload.single('uploadCsv'), function(req, res, next) {
          // req.file is the `uploadCsv` file 
          // req.body will hold the text fields, if there were any 
          console.log(req.file);
          // the buffer here containes your file data in a byte array 
          var csv=req.file.buffer.toString('utf8');
     });

注意： 这仍然会给您在 nodejs 服务器中的错误。 提示：与 (*) 行有关。尝试删除它，看看会发生什么。 谷歌其余部分；）