使用Jquery,formData,Express,multer中间件实现文件上传

首先使用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 [email protected] --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);
});

转载于:https://www.cnblogs.com/Ysera-Dreamer/p/7265248.html