node07---post请求表单提交文件上传

Posted 2020-09-23 672530440

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了node07---post请求表单提交文件上传相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="dopost" method="post" enctype="multipart/form-data">
        <p>
            姓名 ： <input type="text" name="name">
        </p>
        <p>
            性别 ： 
             <input type="radio" name="sex" value="男">男
             <input type="radio" name="sex" value="女">女
        </p>
        <p>
            爱好：
            <input type="checkbox" name="hobby" value="睡觉" />睡觉
            <input type="checkbox" name="hobby" value="吃饭" />吃饭
            <input type="checkbox" name="hobby" value="足球" />足球
        </p>
        <p>
            图片：
            <input type="file" name="tupian" />
        </p>
        <p>
            <input type="submit" />
        </p>
    </form>
</body>
</html>

/**
 * poest提交表单
 */
var http = require("http");
var querystring = require("querystring");


//创建服务器
var server = http.createServer(function(req,res){//每次请求执行函数，外面的已经执行了。
    
    //如果你的访问地址是这个，并且请求类型是post
    if(req.url == "/dopost" && req.method.toLowerCase() == "post"){
        console.log("req.url:" + req.url);
        console.log("req.method:" + req.method);
        var alldata = "";
        //下面是post请求接收的一个公式，node为了追求极致，它是一个小段一个小段接收的。
        //接受了一小段，可能就给别人去服务了。防止一个过大的表单阻塞了整个进程,异步操作。
        req.addListener("data",function(chunk){
            alldata += chunk;
        });
        //全部传输完毕
        req.addListener("end",function(){
            var datastring = alldata.toString();
            res.end("success");
            //将datastring转为一个json对象
            var dataObj = querystring.parse(datastring);
            console.log(dataObj);
            console.log(dataObj.name);
            console.log(dataObj.sex);
        });
    }
});

server.listen(3000,"127.0.0.1");

三、post请求
1        var alldata = "";
2        //下面是post请求接收的一个公式
3        //node为了追求极致，它是一个小段一个小段接收的。
4        //接受了一小段，可能就给别人去服务了。防止一个过大的表单阻塞了整个进程
5        req.addListener("data",function(chunk){
6            alldata += chunk;
7        });
8        //全部传输完毕
9        req.addListener("end",function(){
10            console.log(alldata.toString());
11            res.end("success");
12        });

原生写POST处理，比较复杂，要写两个监听。文件上传业务比较难写。
所以，用第三方模块。formidable。

只要涉及文件上传，那么form标签要加一个属性：
1<form action="http://127.0.0.1/dopost" method="post" enctype="multipart/form-data">

/**
 * 文件上传，改变了表单提交方式。
 */
var http = require("http");
var formidable = require(‘formidable‘);
var util = require("util");

console.log("qqq");
//创建服务器
var server = http.createServer(function(req,res){
    //如果你的访问地址是这个，并且请求类型是post
       console.log("qqqqqqq");
    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) {
            if(err){
                throw err;
            }
            console.log(fields);
            console.log(files);
            console.log(util.inspect({fields: fields, files: files}));
            //所有的文本域、单选框，都在fields存放；
            //所有的文件域，files
            res.writeHead(200, {‘content-type‘: ‘text/plain‘});

            res.end("成功");
        });
    }
});

server.listen(3000);

文件上传并改名

/**
 * Created by Danny on 2015/9/20 15:35.
 */
var http = require("http");
var formidable = require(‘formidable‘);
var util = require("util");
var fs = require("fs");
var sd = require("silly-datetime");
var path = require("path");


//创建服务器
var server = http.createServer(function(req,res){
    //如果你的访问地址是这个，并且请求类型是post
    if(req.url == "/dopost" && req.method.toLowerCase() == "post"){
        //Creates a new incoming form.
        var form = new formidable.IncomingForm();
        //设置文件上传存放地址
        form.uploadDir = "./uploads";
        //执行里面的回调函数的时候，表单已经全部接收完毕了。
        form.parse(req, function(err, fields, files) {
            //if(err){
            //    throw err;
            //}
            //console.log(util.inspect({fields: fields, files: files}));

            //时间，使用了第三方模块，silly-datetime
            var ttt = sd.format(new Date(), ‘YYYYMMDDHHmmss‘);
            var ran = parseInt(Math.random() * 89999 + 10000);
            var extname = path.extname(files.tupian.name);
            //执行改名
            var oldpath = __dirname + "/" + files.tupian.path;
            //新的路径由三个部分组成：时间戳、随机数、拓展名
            var newpath = __dirname + "/uploads/" + ttt + ran + extname;

            //改名
            fs.rename(oldpath,newpath,function(err){
                if(err){
                    throw Error("改名失败");
                }
                res.writeHead(200, {‘content-type‘: ‘text/plain‘});
                res.end("成功");
            });
        });
    }else if(req.url == "/"){
        //呈递form.html页面
        fs.readFile("./form.html",function(err,data){
            res.writeHead(200, {‘content-type‘: ‘text/html‘});
            res.end(data);
        })
    }else{
        res.writeHead(404, {‘content-type‘: ‘text/html‘});
        res.end("404");
    }
});

server.listen(80,"192.168.41.36");

以上是关于node07---post请求表单提交文件上传的主要内容，如果未能解决你的问题，请参考以下文章

node小案例

关于AsyncHttpClient框架的post 提交表单上传文件怎么弄

利用socket模拟http的混合表单上传（在一个请求中提交表单并上传多个文件）

GWT文件上传表单提交POST请求无法读取文件

Vue 表单提交 -- 文件上传

js实现无刷新表单提交文件，将ajax请求转换为form请求方法