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中没有数据，即使它是一个帖子请求。或者是否有其他方法可以从前端向nodejs服务器发送csv / text文件。

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

Answer 1

所以，环顾四周后，我发现问题不在于我的XMLHttpRequest。服务器收到的请求很好，但是正文解析器无法解析text / csv和multipart / form-data内容类型。以下是对此问题的逐步回答。

在将大文件发送到服务器时，在客户端/浏览器端，将其转换为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服务器的方式。

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

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

    //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服务器中出错。提示：它与行（*）有关。尝试删除它，看看会发生什么。谷歌其余的;）

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

Javascript代码

NodeJS服务器

1 个答案: