概述
  1. node.js在处理客户端以POST方式提交的数据时，比较复杂，要写两个监听（data、end），并且要处理上传的图片、文件时也比较艰难
  2. 常用第三方模块包formidable来处理客户端以POST方式提交的表单、文件、图片等
使用GitHub使用文档
  1. 安装npm install formidable
  2. 引入const formidable = require('formidable');
  3. 在服务器端引入formidableconst formidable = require('formidable');
  4. 在post请求中
    ① 实例化
    let form = new formidable.IncomingForm();
    ② 指定文件上传文件夹
    form.uploadDir = path.join(__dirname, 'dir');
    ③ 指定文件后缀是否保存
    form.keepExtensions = true;
    ④ 解析request发送过来的数据
    form.parse(req, function (err, fields, files) {
    if (err) {
        throw err;
    }
    console.log(fields);
    console.log(files);
    res.end('success');
});
使用注意
  1. 表单提交的过程中涉及文件或者图片上传，则一定要设置表单头，即在form标签上加属性为enctype="multipart/form-data",否则文件或图片会上传时效
  2. < input type=“file” name=“uploadImg”>，当中的name属性一定要赋值
  3. 前端传递数据的时候，不可以使用序列化，要是用new FormData($form[0]),
  4. 前端发起ajax请求的时候，不要将数据处理转化成一个查询字符串processData: false,
  5. 前段发起ajax请求的时候，不要设置请求头contentType:false
案例

  1. 前端界面
    index2.ejs

    <!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
<form action="/" method="post" enctype="multipart/form-data">
    <label>
        时间：
        <input type="text" name="l_name">
    </label>
    <br>
    <label>
        地点：
        <input type="text" name="l_address">
    </label>
    <br>
    <label>
        人物：
        <input type="file" name="l_person">
    </label>
    <br>
    <input id="btn_sub" type="button" value="提交">
</form>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
    $('#btn_sub').on('click', function () {
        var $form = $('form');
        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: new FormData($form[0]),
            // 不要处理转化成一个查询字符串
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data);
            }
        })
    });
</script>
</body>
</html>

  2. 服务器代码

    const express = require('express');
const path = require('path');
const fs = require('fs');
const formidable = require('formidable');

const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use('/node_modules', express.static(path.join(__dirname, '/node_modules')));

app.get('/', (req, res, next) => {
    res.render('index2');
});

app.post('/', (req, res, next) => {
    // 1. 创建实例
    let form = new formidable.IncomingForm();
    // 2. 指定文件的上传文件夹
    form.uploadDir = path.join(__dirname, 'dir');
    // 3. 指定文件的后缀
    form.keepExtensions = true;

    // 4. 解析request发送过来的数据
    form.parse(req, function (err, fields, files) {
        if (err) {
            throw err;
        }
        console.log(fields);
        console.log(files);
        res.end('success');
    });
});


app.listen(2000, () => {
    console.log('running!')
});