通过formidable中间件实现文字图片同时上传

目前 Node.js 在大部分领域都占有一席之地，尤其是 I/O 密集型的，比如 Web 开发，微服务，前端构建等。不少大型网站都是使用 Node.js 作为后台开发语言的，用的最多的就是使用Node.js做前端渲染和架构优化，比如 淘宝 双十一、去哪儿网 的 PC 端核心业务等。另外， Node.js 编写的包管理器 npm 已成为开源包管理了领域最好的生态，直接到2017年10月份，有模块超过47万，每周下载量超过32亿次，每个月有超过700万开发者使用npm。   

       而我们将要使用的formidable模块实现了上传和编码图片和视频。它支持GB级上传数据处理，支持多种客户端数据提交。有极高的测试覆盖率，非常适合在生产环境中使用。

       相信现在很多小伙伴在使用node来搭建后台，那么前后台对接少不了的就是图片和文字的上传，下面我将通过这篇文章来对图片文字同时上传问题进行详细的介绍：

安装formidable：

 

这是一个低版本的包，如果在开发中使用高版本的框架（如Express），formidable模块已经包含在框架中。具体用法参考：express-formidable.

通过npm安装：

npm install formidable@latest

这个教程主要是介绍我们使用formidable完成图片和文字同时上传的，所以项目目录结构就先不放出了（项目目录相对简单），项目后台是用express框架，使用了Router的功能。

var express = require('express');
var router = express.Router();
var formidable = require("formidable"); //载入 formidable

router.post("/update_user*", function (req, res) {   //获取前端的异步请求
    var form_update = new formidable.IncomingForm(); //创建上传表单  
    form_update.encoding = 'utf-8'; //设置编码格式
    form_update.uploadDir = './pages/tmp'; //文件上传，设置临时上传目录  
    form_update.keepExtensions = true; //保留后缀  
    form_update.maxFieldsSize = 20 * 1024 * 1024;   //文件大小 k  
    form_update.parse(req, function(err, fields, files) {
        var Price = fields.Price; //获取前端传过来的数据

/*此处可提取更多我们的fields数据（前端表单中发送的字符串行）做一些我们自己的处理，譬如数据库操作*/

        var filesTmp = JSON.stringify(files,null,2);//将我们图片JavaScript的值转化为的json字符串
        if(err){
            console.log('parse error: ' + err);
        } else {
            console.log('parse files: ' + filesTmp);

            var uploadedPath = files.inputFile.path;

            var dstPath = './pages/image/' +fields.Field+"/"+fields.ClassId+"/"+Price+".jpg";  //fields.Field是前端表单中传过来的数据，建议先定义变量再拼接字符串
            //重命名为真实文件名
            fs.rename(uploadedPath, dstPath, function(err) {
                if(err){
                    console.log('rename error: ' + err);
                } else {
                    console.log('rename ok');
                }
            });
        }
    });
});
module.exports(router);

还得记得将我们这里的路由配置挂载到对应的启动文件中哦！

然后，我们可以在前台创建表单来提交请求了：