Node.js使用formidable实现文件上传的功能

小白一枚,刚学习了https://segmentfault.com/a/1190000011424511博主的文章,特此记录.

 

原生的node.js在处理客户端以POST方式提交的数据时，比较复杂，所以用第三方模块包formidable来处理客户端以POST方式提交的表单、文件、图片等。

formidable处理POST方式上传的文件或图片

前端代码:

当表单提交的过程中涉及文件或图片上传，则一定要设置表单头，即在form标签上加上固定写法的属性为enctype="multipart/form-data"，否则文件或图片会上传失败。

其中，当中的name属性一定要赋值。

后端代码:

const formidable = require('formidable');
const fs = require('fs');
const path = require('path');
const http = require('http');

// 启动node的http服务器
var server = http.createServer((req,res)=>{

    // 返回首页
    if(req.url === '/'){

        
        var target = path.join(__dirname,'./form.html');
        fs.readFile(target,(err,data)=>{
            if(err) throw err;
            res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});
            res.end(data);
        });

    // 处理上传文件的路由
    }else if(req.url === '/dopost' && req.method.toLowerCase() == 'post'){
        
        // 处理上传的文件,保存到服务端指定位置
        var form = new formidable.IncomingForm();

        // 设置上传文件保存位置: 当前目录下的upload文件夹
        var targetFile = path.join(__dirname, './upload');
        form.uploadDir = targetFile;

        form.parse(req, function(err, fields, files) {
            if (err) {
                throw err;
            }
                
            // newPath存的是保存路径 + 文件原来的名字
            var oldPath = files.uploadImg.path;
            var newPath = path.join(path.dirname(oldPath), files.uploadImg.name);


            fs.rename(oldPath, newPath, (err) => {
                if (err) {
                    throw err;
                }
                res.writeHead(200, {"Content-Type": "text/html;charset=UTF8"});
                res.end('图片上传并改名成功！');
            });
        });
        
    }else{
        res.writeHead(404,{"Content-Type":"text/html;charset=UTF8"});
        res.end("找不到该页面！");
    }
});

server.listen(3000,'127.0.0.1');