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

节点服务器

 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/text 文件从前端发送到 nodejs 服务器。

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

Answer 1

于是，环顾四周，发现问题不是我的XMLHttpRequest。服务器收到请求就好了，但正文解析器无法解析文本/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 服务器的方式。

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

因此，对于这些内容类型，您可以使用其他中间件来处理请求。有些是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 服务器中给你一个错误。提示：它与行（*）有关。尝试删除它，看看会发生什么。谷歌其余的;)