在node.js下浅谈文件上传的方法

这是接着上篇文章的下部分，关于文件上传的方法。相对下载，前端部分复杂了不少，接下来就谈谈上传的问题。

Html5上传

-FormData

　　FormData是html5新提供XMLHttpRequest Level 2 api，对post数据做了很方便的改进，最大的优点就是可以封入文件类型的对象，上传混合数据时不用依赖submit方法了。
　　用法如下：

var formData = new FormData();formData.append('username', '张三');formData.append('id', 123456);formData.append('file', file);  //file为通过file input选择的文件objvar xhr = new XMLHttpRequest();xhr.open("post", url);xhr.send(formData);

　　这样一套下来带走表单数据。这是我们前端上传的核心部分之一。
　　

-multer模块

　　在express中，上传multipart/form-data数据需要使用multer模块，一个express的中间件服务。
　　该模块使用前需要初始化，设置一些数据参数。
　　首先是上传文件保存的地址：

var multer = require('multer');var upload = multer({ dest: './uploads/'}); //保存在uploads文件夹中

　　这个文件地址用于存储文件上传后放置的文件夹位置，系统会自动给它命名。
　　
　　之后需要提前设置通过multipart/form-data上传过来的文件的name属性。比如我通过FormData封装了三个数据，分别是”username”,”id”,”file”。那么，我需要在multer的实例中设置这三个数据，代码如下：

var cpUpload = upload.fields([    {username: 'file'},    {id: 'file'},    {file: 'src', maxCount: 10}  //maxCount为一次传输文件的最大数量]);

　　之后在router中传入这个中间件，后台就可以接收到从uploadFile接口传入的数据：

router.post("/uploadFile",cpUpload, function(req, res, next){    var files = req.files.file,        dir = req.body.dir;    ...});

　　文件的数据保存在req.files.file中，其他类型数据保存在req.body.dir中。

-上传并发数量

　　和下载类似的，上传存在上传单个文件和多个文件的区别。因此上传思路可以有两种：单文件多ajax，多文件少ajax。
　　
　　单文件多ajax由于一次只有一个文件，报文size相对比较小，相对稳定性比较好。但是由于对服务器重复请求增加了时间总长度，总上传时间没有只进行一次ajax快。
　　大致代码如下：

for (var key in files) {    if (parseInt(key,10) >= 0) { //排除length等不需要的属性        var formData = new FormData();        formData.append("file",files[key]);        ... //xhr的初始化等代码        xhr.send(formData);    }}

　　多文件少ajax由于有更少的请求，总时间比单文件ajax流快。但由于报文由几个文件叠加，几个大文件叠加起来的总报文会非常大，网络不稳定时可能会导致上传了很久的文件最后功亏一篑。
　　由于FormData可以装入多个文件名一致的文件，所以代码如下：

var formData = new FormData();for (var key in files) {    if (parseInt(key,10) >= 0) { //排除length等不需要的属性        formData.append("file",files[key]);    }}... //xhr的初始化等代码xhr.send(formData);

　　具体选择哪种传输见仁见智。在这里我用的是单文件多ajax的方式。

-低版本ie兼容

低版本ie下不能使用FormData的方式传输文件，需要用原来的submit方式。这里直接贴代码。

var form = document.getElementById("form");var iframe = document.getElementById("iframe");if(!iframe){    iframe = document.createElement("iframe");}form.action = "/uploadFile";form.target = "iframe";iframe.name = "iframe";iframe.src = "";iframe.style.display = "none";iframe.onload = function(){    ...};document.getElementById("options").appendChild(iframe);form.submit();

　　值得一提的是，submit的提交方式，在多选文件的情况下是提交一组文件的，也就是多文件单ajax的方式。

ajax回调

-ajax回调

　　在单文件多ajax的时候，可能会遇到多个ajax回调的问题。在一般情况下，如果直接按照正常的方式写ajax回调会出现回调被覆盖的问题。

for (var key in files) {    if (parseInt(key,10) >= 0) {     //排除length等不需要的属性        var formData = new FormData();        formData.append("file",files[key]);        formData.append("dir",rootDir);        var xhr = new XMLHttpRequest();        xhr.open("POST","/uploadFile");        xhr.send(formData);        //并不是每个ajax的onreadystatechange都会触发        xhr.onreadystatechange = function(){            if(xhr.readyState == 4){                xhr.onreadystatechange = function(){};                if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){                    console.log("succ");                }else{                    console.log("error");                }            }        }    }}

　　在多个ajax成功上传后，控制台只会输出并不对应数量的callback甚至只有一个callback，前几个都没能顺利的进去，我不能肯定准确的原因。在研究jquery源码后发现，这里需要简单的将XMLHttpRequest一系列步奏封装成函数，就可以顺利走进每个回调了。

for (var key in files) {    if (parseInt(key,10) >= 0) {     //排除length等不需要的属性        var formData = new FormData();        formData.append("file",files[key]);        formData.append("dir",rootDir);        xhrTest();        function xhrTest(){            var xhr = new XMLHttpRequest();            xhr.open("POST","/uploadFile");            xhr.send(formData);            //正常回调            xhr.onreadystatechange = function(){                if(xhr.readyState == 4){                    xhr.onreadystatechange = function(){};                    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){                        console.log("succ");                    }else{                        console.log("error");                    }                }            };        }    }}

　　不知什么原因让浏览器遗忘了这些callback，用数组保存了这些xhr和callback，response该返回的也都返回了，或许需要闭包才能好好的保存它们。有知道原因的可以告诉我一下。
　　
　　上面写的有点不够好，参考jquery，xhr再封装一下。

var xhrId = 0;var xhrCallbacks = {};var xhrCallbackCount = 0;/** * XMLHttpRequest的封装 * @params options 参考jquery.ajax */function xhrSend(options){    var callback;    return (function(){        var xhr = new XMLHttpRequest();        var id = ++xhrId;        xhr.open(options.method,options.url);        xhr.send(options.data);        callback = function(){            if(xhr.readyState == 4){                delete xhrCallbacks[id];                xhrCallbackCount--;                xhr.onreadystatechange = function(){};                if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){                    options.success && options.success(xhr.responseText);                }else{                    options.error && options.error(xhr.responseText);                }                if(xhrCallbackCount == 0){                    options.done && options.done();                }            }        }        xhrCallbackCount++;        xhr.onreadystatechange = xhrCallbacks[id] = callback;    })();}

　　之后只需调用xhrSend(options)即可。

上传到当前目录

　　事实上由于在multer模块的设置，上传的文件只在当前的uploads目录下。但是由于我们能获取到文件名，因此只要使用fs模块的rename移动文件并重命名就可以了。

fs.rename(currdir,realdir,function(err){    if(err){}});

-用promise处理异步回调

　　由于fs.rename是异步，在多个fs.rename异步下不知道它何时完成所有的回调任务。这里使用es6的promise控制异步回调。

var fsPromise = function(file){    return new Promise(function(resolved,rejected){        fs.rename(currdir,realdir,function(err){            if(err){                rejected(err);            }else{                resolved();            }        });    });}

　　接下来使用Promise.all控制所有rename：

Promise.all(files.map(fsPromise)).then(function(){    res.set({        'Content-Type':'text/html'    });    res.send({"code":"s_ok");}).catch(function(err) {    res.send({"code":"failed", "summary":err});});

　　至此，所有步骤完成。完整demo在这里