在我上一篇写的Node.js实现简单的POST请求
里面POST请求接受参数需要写两个事件，这难免有些不太方便
\"在这里插入图片描述\"

如果我们用formidable来接受参数的话，会变得特别方便。

下面我们来写一个Demo，来利用formidable来实现图片上传

1.下面来看一眼 目录结构

\"在这里插入图片描述\"

2.先来写一个简单的前端上传页面

index.html
<!DOCTYPE html>
<html lang=\"en\">
<head>
    <  charset=\"UTF-8\">
    <  name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <  http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
    < >Document</ >
</head>
<body>
    <form class=\"upload\" action=\"shangchuan\" enctype=\"multipart/form-data\" method=\"post\"><!--  上传接口是/shangchuan -->
        <p>
            请上传一个头像
            <input type=\"file\" name=\"wenjian\">
        </p>
        <p>
            <input type=\"submit\" value=\"提交\">
        </p>
    </form>
</body>
</html>

2.package.json 文件

安装依赖,执行下面这三句npm语句

npm install finalhandler --save
npm install serve-static --save
npm install formidable --save

之后会自动生成下面这个package.json文件

{
  \"dependencies\": {
    \"finalhandler\": \"^1.1.1\",
    \"formidable\": \"^1.2.1\",
    \"serve-static\": \"^1.13.2\"
  }
}

3.post.js

var finalhandler = require(\'finalhandler\')
var http = require(\'http\')
var serveStatic = require(\'serve-static\')
var url = require(\'url\')
var fs = require(\'fs\')
var querystring = require(\'querystring\')
var formidable = require(\'formidable\')
var path = require(\'path\')
// Serve up public/ftp folder
//配置静态资源服务器，将public文件夹静态化出来

var serve = serveStatic(\'public\', {\'index\': [\'index.html\', \'index.htm\']})

// Create server
var server = http.createServer(function onRequest (req, res) {
    //路由
    var pathname = url.parse(req.url).pathname;
    if(pathname == \'/shangchuan\'){
        //创建一个表单的实例，formidable
        var form = new formidable.IncomingForm();
        //设置上传的文件存放在哪里
        form.uploadDir = \'./uploads\';
        //处理表单
        form.parse(req,(err,fields,files) => {
            //fields 表示普通控件
            //files 表示文件控件
            if(!files.wenjian){
                return;
            }
            if(!files.wenjian.name){
                return;
            }
            var extname = path.extname(files.wenjian.name);获取文件的扩展名，便于下面修改上传后的文件名字
            //改名
            fs.rename(files.wenjian.path, files.wenjian.path + extname,() => {
                res.end(\'上传成功\')
            })
            // console.log(fields);
        })
        return;
    }
    serve(req, res, finalhandler(req, res))
})

// Listen
server.listen(3000);
console.log(\'服务已经启动在3000端口\');

4.最后找到post文件的目录，然后开始node post.js

会看到这个页面

\"在这里插入图片描述\"

然后选择任意文件点击提交
会发现在很短的时间内你的文件会提交成功在你的uploads文件夹下。

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章