转自：https://www.mizuiren.com/479.html
文件上传对于网站来说意义非凡，今天来挖挖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服务器端的代码：
-
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文件夹里了。
当然后续功能还有许多可以做的，比如说检查文件的重复性，文件类型限制等其它安全因素隔离。
更多精彩内容：各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等，尽在 天边资源网 。