Node.js入门笔记(6)：表单上传demo持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

表单的提交是post请求最常用的情景之一，现在我们来根据前面几节的内容写一个上传表单的小demo 首先我们建立一个简单的form表单，放到一个html文件中

1．建立表单html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <form  action="/post.js" method="post" enctype="multipart/form-data">
    <input type="file" name="file" / >
    <input type="submit" name=" submit" value="submit" />
</form>
</body>
</html>>

2．开启服务

我们先引入http和fs模块然后创建server服务，如果是get请求的话则返回我们的表单页面，前面我们已经知道访问端口服务的时候会自动请求get方法，所以我们再get方法中通过createReadStream返回已经创建好的页面

var http = require ( "http" )
var fs = require ( "fs" )
var server = http.createServer (function (req, res){
    switch (req.method){
        case "GET" :
            // console.log(req.url);
            console.log('get');
            fs.createReadStream ( "./http/form.html" ).pipe (res) ;break ;
        case "POST" :
            dealUpload (req,res) ;//自定义的处理方法break ;
            console.log('post');
        default :
        console. log ( "other request" );//其他的请求类型
    }
}) ;

server.listen (3000)

打开我们的端口进行查看一下页面是否已经返回

我们可以看到已经加载页面了，和我们想的一样，发送了一个get请求所以返回了页面

我们的表单action请求的是post.js，也是我们服务的文件，所以请求action的时候会访问到我们服务中的识别为post请求，会进入到我们的dealUpload函数，这个是我们来处理上传过来的文件的函数

var formidable = require("formidable"); //载入 formidable
function dealUpload (req,res) {
    var form = new formidable.IncomingForm();//创建formidable.IncomingForm对象
    form.keepExtensions = true;//保持原有的扩展名
    form.uploadDir = './' ; //上传目录为当前目录
    form.parse (req, function (err,fields,files ) {
        if(err) throw err; 
        fs.writeFile(files.file.originalFilename,{flag:"a",encoding:"utf-8"},(err)=>{
            if(err){
                console.log(err);
                return
            } 
        })
        res.writeHead (200,{"content-type":'text/plain'});
        res.end ( 'upload finished ' ) ;
    })
}

这里使用了formidable模块来处理表单上传的文件，虽然可能年代有点老，但是我这里尽量按照书的内容来进行编码，这里我发现书中的内容有点出入，所以在form.parse中自己去生成了一个文件，parse的回调中files保存了文件信息，所以我们获取文件的原始名称，进行新建文件。

上传文件后会有upload finished输出，证明已经是生成了图片，再来看下我们的目录也是已经把文件按照上传时候的名称进行新建了