nodejs express读取前端页面ajax发送的formData格式的方法

最近开始学习nodejs，很多东西都没弄懂，今天在学express，于是想做一个小demo，希望将前端的form表单，格式为formData的类型，通过ajax发送给express后端。在网上找了很多方法，大部分人都说用require('body-parser')，这个中间件来接收数据，但我的req.body总是为{}，不知道为什么，真的很气人！最后我发现body-parser并不支持contentType: multipart/form-data的格式类型，也就是不支持formData格式。我发现网上并没有答案，所以我就发了出来。

在最开始用http模块的时候，当时我用multiparty中间件进行对formData类型的数据进行处理。最开始我是不想用它的，因为我相信express里面肯定有对formData类型的处理，但研究了半天也没效果，所以我到了最后抱着试一试的心态用它，结果成功的读取到了数据，哈哈哈。

下面我把网上失败的代码和自己弄的成功的代码贴上来。

 前端代码

1. 前端html表单代码，我把中间的div省略了，打了下面3个省略号。。。下面我列出了我的form表单，那是完整的

          <form id="form" method="post">
            <div class="list1 list">
              <label>
                Pclass: 
              </label>
              <input type="text" name="Pclass" placeholder="乘客所持票类">
            </div>
            <div class="list2 list">
              <label>
                Sex: 
              </label>
              <input type="text" name="Sex" placeholder="性别">
            </div>
            ...
            ...
            ...
            <div class="list6">
              <input type="button" onclick="start();" value="存为文本文件">
            </div>
          </form>

 

2. 前端jquery的ajax代码

function start(){
    const form = document.getElementById("form");

    //通过FormData类获取form表单数据
    let formData = new FormData(form);
    //以ajax方式，能不必跳转，后台就能获取数据
    $.ajax({
        type:"POST",
        url:"/index",
        data:formData,
        processData:false,
        contentType:false,
        success:function(result){
            console.log(result);
        },
        error:function(error){
            console.log("error");
            alert("错误：数据传输失败！");
        }
    });
}

 nodejs，用express框架写的后端代码，这些是写在app.js里的

 3. 之前在网上找到失败的代码，req.body打印出来的是{}

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

//对JSON请求体解析中间件
app.use(bodyParser.json());
//对urlencoded请求体解析中间件,extended:true 高级模式 false:普通 没有区别
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/index',function(req,res){
    console.log(req.body);
    res.send('数据已接收');
  });
})

 

4. 最后用自己的办法成功读取出formData类型的form表单数据，也就是用的multiparty中间件

var express = require('express');
var multiparty = require('multiparty');
var app = express();

app.post('/index',function(req,res){
  let form = new multiparty.Form();
  form.parse(req, function(err,fields,file){
    console.log(fields);
    res.send('数据已接收');
  });
})

打印出来的是个这个形式

 我们可以将里面的数据提取出来，修改post里，将fields.name，如input标签里name="Pclass"，写fields.Pclass形式就能读取里面的值，如下列代码

app.post('/index',function(req,res){
  let form = new multiparty.Form();
  form.parse(req, function(err,fields){
    console.log(fields);
    let datas = fields.Pclass + " " + fields.Sex + " " + fields.age
    + " " + fields.fare + " " + fields.embarked;
    console.log("写入的数据(pclass | sex  | age  | fare | embarked)"+datas);
    res.send('数据已接收');
  });
})

打印出来的数据，成功读取！