使用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 multer@0.1.6 --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);});