node.js表单处理和文件上传

一、get请求

表单提交HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单提交</title>
</head>
<body>
  <form action="http://127.0.0.1:2080/" method="GET">
     <input type="text" name="name"><br>
     <input type="text" name="age">
     <input type="radio" name="sex" value="男">男
     <input type="radio" name="sex" value="女">女
     <br>
     <input type="submit">
  </form>
</body>
</html>

node.js服务器搭建

这里重要利用了url模块，其中url.parse(req.url, true).query，
url.parse()第二个参数设置为true，则 query 属性总会通过 querystring 模块的 parse() 方法生成一个对象。 如果为 false，则返回的 URL 对象上的 query 属性会是一个未解析、未解码的字符串。 默认为 false。

• API资料：url模块 http://nodejs.cn/api/url.html

const http = require('http');
const url = require('url');

const server = http.createServer((req, res) => {
   const queryObj = url.parse(req.url, true).query;
   res.writeHead(200, {
       'Content-Type': 'text/html; charset=UTF8'
   })
   const name = queryObj.name;
   const age = queryObj.age;
   const sex = queryObj.sex;
   res.write(`服务器接受到提交： name：${name}, age: ${age}, sex: ${sex}`);
   res.end();
})
server.listen(2080, '127.0.0.1');

运行

命令行启动服务器 ，打开html文件,注意不需要写服务器域名



填写表单，提交数据,当点击提交后，请求的的url直接从file:///Users/shaojinghong/Desktop/form.html
变成http://127.0.0.1:2080/?name=jinghong&age=22&sex=%E7%94%B7

二、POST请求

搭建服务端

post请求服务端固定写法： req.addListener(‘data’, (chunk) => { })和req.addListener(‘end’, () => {});用来一段一段接受buffer格式的表单数据，然后调用toString()得到字段name=%E6%99%AF%E6%B4%AA&%E7%94%B7=on，然后调用 querystring模块的parse(dataString)将这种字符串转换成对象

const http = require('http');
const querystring = require('querystring');
const server = http.createServer((req, res) => {
    if (req.url == '/dopost' && req.method.toLowerCase() == 'post'){
      // 如果访问的地址是这个，并且请求方法是post
      let allData = '';
      // 下面是为了追求极致，是一小段一小段chunk接收的
      req.addListener('data', (chunk) => {
          // chunk为buffer类型
          allData += chunk;
          console.log(chunk); // <Buffer 6e 61 6d 65 3d 25 45 36 25 39 39 25 41 46 25 45 36 25 42 34 25 41 41 26 25 45 37 25 39 34 25 42 37 3d 6f 6e>
      });
      // 表单chunk全部接收完毕
      req.addListener('end', () => {
          let dataString = allData.toString();
          console.log(dataString);// name=%E6%99%AF%E6%B4%AA&%E7%94%B7=on
          let dataobj = querystring.parse(dataString);
          console.log(dataobj); // { name: '景洪', '男': 'on' }
          res.end('success');
      })

    }
});
server.listen(8080, '127.0.0.1'); 

编写表单HTML

<!DOCTYPE html>
<html>
<head>
    <title>post实验</title>
    <meta charset="utf-8">
</head>
<body>
  <form action="http://127.0.0.1:8080/dopost" method="post">
   <p>
      姓名：<input type="text" name="name">
   </p>
   <p>
      性别：
      <input type="radio" name="男">男
      <input type="radio" name="女">女

   </p>
   <p>
      <input type="submit">
   </p>
   </form>
</body>
</html>

运行server，提交表单

三、post上传文件

编写HTML表单文件

注意使用 < form action=”http://127.0.0.1:8080/dopost” method=”post” enctype=”multipart/form-data” >和< input type=”file” name=”picture” >标签
关于file上传标签说明：http://www.w3school.com.cn/jsref/dom_obj_fileupload.asp

具体代码：

<!DOCTYPE html>
<html>
<head>
    <title>post实验</title>
    <meta charset="utf-8">
</head>
<body>
  <form action="http://127.0.0.1:8080/dopost" method="post" enctype="multipart/form-data">
   <p>
      姓名：<input type="text" name="name">
   </p>
   <p>
      性别：
      <input type="radio" name="男">男
      <input type="radio" name="女">女
   </p>
   <p>
      图片上传
      <input type="file" name="picture">
   </p>
   <p>
      <input type="submit">
   </p>
   </form>
</body>
</html>

编写node服务器端代码，使用formidable包，进行post数据的接收、解析

formidable： https://www.npmjs.com/package/formidable

const http = require('http');
const querystring = require('querystring');
const formidable = require('formidable');
const server = http.createServer((req, res) => {
    if (req.url == '/dopost' && req.method.toLowerCase() == 'post'){
        var form = new formidable.IncomingForm();
        // 设置文件保存路径，相对路径
        form.uploadDir = "./uploads";
        // 解析表单， fields表示文本域，files表示文件域
        form.parse(req, function(err, fields, files) {
          console.log(fields, files);
          res.writeHead(200, {'content-type': 'text/plain'});
          res.write('received upload:\n\n');
          res.end();
        });

    }
});
server.listen(8080, '127.0.0.1'); 

使用express解析post提交的数据为json格式

这里需要使用body-parser这个中间件

const express = require('express');
// 使用中间件之前先npm install body-parser
const bodyParser = require('body-parser');

const app = new express();

//使用中间件
app.use(bodyParser.urlencoded({ extended: false }))

app.use(bodyParser.json());

app.post('/', (req, res) => {
    console.log(req.body);
    res.send();
});

app.listen(3000);