nodejs-5.4 formidable表单数据处理及文件上传模块

1.表单处理

req.addListener('data', function(chunk){})
req.addListener('end', function(){})

app.post('/user', function(req,res){
    //接受数据
    // res.end('user data');
    var data = '';
    req.addListener('data', function(chunk){
        data += chunk;
    });

    req.addListener('end', function(){
        var d = querystring.parse(data);
        console.log(d);
        res.end('over');
    });
});

 

2.var formidable = require('formidable');

(1) nodejs 实现表单图片上传栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="/form" method="post" enctype="multipart/form-data">
        <input type="text" name="username">
        <input type="text" name="password">
        <input type="file" name="profile">
        <button>提交</button>
    </form>
</body>
</html>
form.html
var http = require('http');
var formidable = require('formidable');
var fs = require('fs');

var server = http.createServer(function(req, res){
    // GET  /form
    if(req.method == 'GET' && req.url == '/form') {
        fs.readFile('./form.html', function(err, data){
            res.setHeader('content-type','text/html;charset=utf-8');
            res.end(data);
        });
    }else if(req.method=="POST" && req.url=="/form") {
        //
        var form = new formidable.IncomingForm();
         //设置要存储的文件夹位置  这里要手动创建一个
         form.uploadDir = "./uploads";
         //保留文件后缀名
         form.keepExtensions = true;
        form.parse(req, function(err, fields, files) {
          console.log({fields: fields, files: files})
          res.end('ok');
        });
    }else{
        res.end('404');
    }


    // POST /form

});

server.listen(80);
app.js

 

(2) express 使用ejs模板引擎实现表单图片上传栗子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单</title>
</head>
<body>
  <h2>用户注册</h2>

  <form action="/form" method="post" enctype="multipart/form-data">
    用户名: <input type="text" name="username"> <br>
    密码: <input type="password" name="password"><br>
    确认密码: <input type="password" name="repassword"><br>
    <input type="file" name="profile"><br>
    <button>提交</button>
  </form>
</body>
</html>
form.ejs
var express =require('express');
var formidable = require('formidable');
var router = express.Router();

var util = require('util');
var app = express();
var fs = require('fs');

//设置模板引擎
app.set('view engine', 'ejs');
app.set('views','views');

//路由    GET /form  显示表单    POST /form 处理表单数据
app.get('/form', function(req,res){
  //显示表单
  res.render('form');
});

//处理表单
app.post('/form', function(req,res){
  // console.log(req);
  var form = new formidable.IncomingForm();
  var dir = './public/uploads'
  // 如果文件夹不存在
  if(!fs.existsSync(dir)){
    fs.mkdirSync(dir);
  }
  
  //上传的文件夹位置
  form.uploadDir = dir;
  //设置保留文件后缀
  form.keepExtensions = true;

    form.parse(req, function(err, fields, files) {
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('received upload:\n\n');
      res.end(util.inspect({fields: fields, files: files}));

      //单个参数的获取
      // var username = fields.username;
      // console.log(username);
      // res.end('over');
    });

    return;
  
});

//启动
app.listen(3000);
app.js

 

posted @ 2018-05-28 10:53  心之所在无畏无惧  阅读(207)  评论(0)    收藏  举报