nodejs+multer+ajax檔案上傳

標籤：href   localhost   www.   提交   ssd   pack   save   style   window   

前端 html代碼 + ajax代碼

　　form表單(無需指定action)

<form enctype="multipart/form-data" method="post" class="upload-cont">    <input type="file" name="files1" class="files1">    <input type="text" name="username" class="username">    <input type="button" class="uploadBtn" value="點擊上傳"></form>

　　使用jquery中的ajax的方式上傳檔案

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>

$(".files1").on("change",function(e){     var e = e || window.event;     var files = e.target.files;     var file = files[0];    //檔案上傳    $(".uploadBtn").off("click").on("click",function(){         var username = $(‘.username‘).val();         var formData = new FormData();         formData.append(‘files1‘,file);         formData.append(‘username‘,username);         console.log(file);         $.ajax({              url: "/ajaxUpload",              type: "post",              data:formData,              contentType: false,              processData: false,              success: function(res){                   console.log(res);              },              error:function(err){                   console.log(err);              }       });   })
})
</script>

FormData對象介紹 https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

通過FormData對象可以組裝一組用 XMLHttpRequest發送請求的鍵/值對。它可以更靈活方便的發送表單資料，因為可以獨立於表單使用。

如果你把表單的編碼類別型設定為multipart/form-data ，則通過FormData傳輸的資料格式和表單通過submit() 方法傳輸的資料格式相同。

所以使用formData的時候 只需要在form上設定enctype="multipart/form-data"，然後用ajax跟formData提交form表單資料,可代替直接用form表單submit提交方式。 

multer介紹

　　Multer 是一個 node.js 中介軟體，用於處理 multipart/form-data 類型的表單資料, 它主要用於上傳檔案. 它是寫在 busboy 之上非常高效。

　　注意: Multer 不會處理任何非 multipart/form-data 類型的表單資料.

　　multer文檔地址：https://www.npmjs.com/package/multer
　　引用地址：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

windows下 安裝 multer

npm install --save multer

multer的使用

var multer = require(‘multer‘);

/**
 * process.cwd()擷取項目根目錄地址，可以將上傳的檔案指定到靜態檔案目錄下，然後再返回地址給前端頁面，如：
 * var uploadPath = process.cwd()+‘/public/uploads‘ 前端訪問地址 http://localhost:3000/uploads/檔案名稱
 **/

var uploadPath = process.cwd()+‘/uploads‘;//直接存放在根目錄下uploads
var storage = multer.diskStorage({//multer儲存引擎  儲存引擎自訂引用 https://github.com/expressjs/multer/blob/master/StorageEngine.md  destination: ,//指定上傳檔案的路徑
  filename: function (req, file, cb) { cb(null, file.fieldname + ‘-‘ + Date.now())//命名上傳檔案 } }) 
  var multer = multer({ 
      storage: storage，

　　 //limits：‘‘//Limits of the uploaded data
}).single(‘files1‘);//single 單檔案上傳，files1為form表單中 接受檔案的name欄位名稱

app.post(‘/ajaxUpload‘,function(req,res){　

　　multer(req,res,function(err){

　　　　if(err){
　　　　　　console.log(err);
　　　　　　return ;
　　　　}
　　　　console.log(req.body.username);//擷取通過formData中表單的欄位 name="username"的資料

　　　　//req.body ajax提交的非檔案資料
　　　　//req.body.username //提交參數 username
　　　　//req.file.fieldname 上傳檔案 input file  name欄位名稱
　　　　//req.file.filename 上傳檔案 檔案名稱
　　　　//req.file.originalname 上傳檔案 檔案名稱
　　　　//req.file.mimetype 上傳檔案類型
　　　　//req.file.size 上傳檔案大小
　　　　//req.file.destination 上傳檔案存在的路徑
　　　　//req.file.path 上傳檔案的 路徑
　　　　console.log(req.file.path);

　　　　　/**

         * 可以通過req.file中的參數，做一個檔案上傳的過濾，例如req.file.size 限制檔案上傳大小，req.file.mimetype 限制檔案上傳的類型

         **/

　　　　res.send({msg:‘上傳成功‘,img:req.file.path});//返回資料到前端頁面，可以將上傳的圖片，在前端預覽。

　　})

});

在使用 res.send()發送資料到前端時，因為本文圖片存放的地址是在項目根目錄下，所以顯示的地址是D:\leijie\test\express-mysql\uploads\share.png。
這種形式在頁面上無法預覽出來，如果想簡單的使用預覽出，可以將圖片上傳的目錄存放在public靜態目錄下 
靜態目錄設定 在app.js檔案中設定 app.use(express.static(path.join(__dirname, ‘public‘)));

 相關連結：

　https://www.npmjs.com/package/multer

   https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

 

   https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

   https://github.com/expressjs/multer/blob/master/StorageEngine.md

   https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

nodejs+multer+ajax檔案上傳