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

雨点打透心脏的1/2处 2022-02-13 10:09 918阅读 0赞

最近开始学习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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k1OTQ2_size_16_color_FFFFFF_t_70][]

2. 前端jquery的ajax代码

### ** 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('数据已接收');
      });
    })

![20190427185631297.png][]

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('数据已接收');
      });
    })

打印出来的是个这个形式

![20190427185500680.png][]

我们可以将里面的数据提取出来，修改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('数据已接收');
      });
    })

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

![2019042719032995.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k1OTQ2_size_16_color_FFFFFF_t_70]: /images/20220213/00f1f49ab2b948c591d694be61d4453e.png
[20190427185631297.png]: /images/20220213/b82df9d7860d44d193f9df5038ca72d8.png
[20190427185500680.png]: /images/20220213/149640a9f6f54cee84411def1003132c.png
[2019042719032995.png]: /images/20220213/c598847feceb42538693d6dd8d107ccb.png