nodeJs模块formidable实现多文件上传
作者：秋了秋 发表时间：2017年03月28日
文件上传对于网站来说意义非凡，今天来挖挖nodejs上传文件的完整功能，支持多文件批量上传以及讲解相关技术点和注意事项。
文件上传我们一般使用form表单选取文件进行上传，有两种方法实现，一种是传统意义的form表单：
<form action="/upload" method="post">
<input type="file" name="myfile" id="myfile" mutiple/>
<input type="submit" value="上传" id="submit"/>
</form>
还有一种是通过js创建表单，效果是一样的，只不过通过js来创建灵活性强：
html:
<input type="file" name="myfile" id="myfile" mutiple/>
<input type="submit" value="上传" id="submit"/>
js:
<script>
function uploadFile(){
var formData = new FormData();
var files = document.getElementById("myfiles").files;
formData.enctype="multipart/form-data";
var fileArray=[].slice.call(files,0);//类数组转换为数组
fileArray.forEach(function(file){
formData.append("myfile",file);//循环遍历把文件对象插到formData对象上
});
var xhr = new XMLHttpRequest();
xhr.open("post","/upload",true);//发送post请求到/upload
xhr.onload = function (e) {
if(this.status == 200){
document.getElementById("result").innerHTML = this.response;
}
};
xhr.send(formData);
}
var input=document.getElementById("submit");
input.onclick=uploadFile;//绑定事件
</script>
以上为前端页面html的准备，现在开始处理服务端的路由逻辑了。路由的设计就不多讲了，测试用例直接放app.js（入口文件）。需要用到的模块express、formidable、fs。如果没有安装这些模块，请自觉npm insatll express --save-dev和npm insatll formidable --save-dev，当然fs是nodejs自带的模块，不需要安装，如果你的node没有这个模块，那你一定是装了一个假的node。
node服务器端的代码：
var express = require('express');
var app = express();
var formidable = require('formidable');
var fs = require('fs');
app.post('/upload', function(req, res, next) {//对应前端请求的路径，请求方法
var form = formidable.IncomingForm({
encoding : 'utf-8',//上传编码
uploadDir : "public/files",//上传目录，指的是服务器的路径，如果不存在将会报错。
keepExtensions : true,//保留后缀
maxFieldsSize : 2 * 1024 * 1024//byte//最大可上传大小
});
var allFile=[];
form.on('progress', function(bytesReceived, bytesExpected) {//在控制台打印文件上传进度
var progressInfo = {
value: bytesReceived,
total: bytesExpected
};
console.log('[progress]: ' + JSON.stringify(progressInfo));
res.write(JSON.stringify(progressInfo));
})
.on('file', function (filed, file) {
allFile.push([filed, file]);//收集传过来的所有文件
})
.on('end', function() {
res.end('上传成功！');
})
.on('error', function(err) {
console.error('上传失败：', err.message);
next(err);
})
.parse(req,function(err, fields, files){
if(err){
console.log(err);
}
allFile.forEach(function(file,index){
var fieldName=file[0];
var types = file[1].name.split('.');
var date = new Date();
var ms = Date.parse(date);
fs.renameSync(file[1].path,form.uploadDir+"/"+types[0]+"."+String(types[types.length-1]));//重命名文件，默认的文件名是带有一串编码的，我们要把它还原为它原先的名字。
});
});
});
在前端选择文件后，点击上传文件之后就把文件都成功上传到服务端的public/files文件夹里了,如果失败了，你一定是复制了一份我的假的代码。关键要理解，关键要理解，关键要理解。
当然后续功能还有许多可以做的，比如说检查文件的重复性，文件类型限制等其它安全因素隔离。
9
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/479.html