当前位置:秋叶网络博客 前端设计 ◊ nodeJs模块formidable实现多文件上传

nodeJs模块formidable实现多文件上传

作者:秋叶 发表时间:2017年3月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文件夹里了,如果失败了,你一定是复制了一份我的假的代码。关键要理解,关键要理解,关键要理解。

当然后续功能还有许多可以做的,比如说检查文件的重复性,文件类型限制等其它安全因素隔离。

目录: 前端设计 | 标签: | 6233次阅读