首先使用easyUI放置文件上传组件。用于用户获取本地文件。
<form id="file-upload" name="file-upload"enctype='multipart/form-data' > <div style="margin:20px 0;"></div> <input id="fb" name="emp_inf" multiple='mutiple' class="easyui-filebox" style="width:400px"data-options="prompt:'Please choose a file...'"> <div style="margin:20px 0;"></div></form>
Form的name用于ajax获取数据,emp_inf用于后台获取文件。接下来ajax使用formData对文件数据进行格式化。
function fileupload() {
var formData = new FormData($('#file-upload')[0]);$.ajax({ url: '{ {projcfg.appurl}}/admin/api/project/employee/employee/upload',type: 'POST',data: formData,async: false,cache: false,contentType: false,processData: false,success: function (data) { alert('上传成功' + data);refresh();},error: function (data) { alert('上传失败' + data);refresh();} });}接下来就是很重要是的,我们需要在app.js中首先对文件上传路径进行设置,以及引入multer中间件。Multer中间件在使用的时候需要在0.1.8-0.1.6版本,在安装的时候使用
npm install --save
否则在项目启动的时候multer();会被识别为不是一个方法。所以一定要注意版本号。
var multer=require('multer');
app.use(multer({ dest: './public/file',rename: function (fieldname, filename) { return filename;}}));以上dest是文件存放位置,rename是对上传文件进行改名。最后在路由中直接使用req.files.emp_inf即可对文件相关信息进行获取,并且文件会上传在./public/file路径下。这样的上传方式不会更改文件的名字,也不会对文件类型和大小进行验证拦截。详情请参照multer中间件文档(https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md)
最后就是获取相关的文件信息,这里并不需要引入fs模块,因为暂时我们还不需要对文件进行操作。在需要对文件进行操作的时候再引入fs模块。一般都是在service中进行文件操作。
router.route('/upload').post(function (req, res) {
var file=req.files.emp_inf;console.log(file.encoding);console.log(file.extension);console.log(file.filename);console.log(file.mimetype);console.log(file.name);console.log(file.originalname);console.log(file.path);console.log(file.size);});