【nodejs】--express的中介軟體multer實現圖片檔案上傳--【XUEBIG】
摘要：
Multer是nodejs中處理multipart/form-data資料格式(主要用在上傳功能中）的中介軟體。該中介軟體不處理multipart/form-data資料格式以外的任何形式的資料
Tips：multipart/form-data是用來指定傳輸資料的特殊型別的，主要就是我們上...
Multer是nodejs中處理multipart/form-data資料格式(主要用在上傳功能中）的中介軟體。該中介軟體不處理multipart/form-data資料格式以外的任何形式的資料
Tips：multipart/form-data是用來指定傳輸資料的特殊型別的，主要就是我們上傳的非文字的內容，比如圖片或者mp3等等
1、安裝第三方外掛
cnpm install multer --save
2、配置檔案
//引入依賴模組
var express = require('express');
var router = express.Router();
var multer = require("multer");
var storage = multer.diskStorage({
//將上傳的檔案儲存在指定的位置（不存在的話需要手動建立）
destination: function (req, file, cb) {
cb(null, './public/imgs')
},
//將上傳的檔案做名稱的更改
filename: function (req, file, cb) {
cb(null,Date.now()+"-"+file.originalname )
}
})
//建立multer物件
var upload = multer({ storage: storage })
//指定當前欄位可以攜帶多個檔案
var cpUpload = upload.fields([{ name: 'companylogo', maxCount: 1 }])
// 匯出模組
module.exports = router;
3、解析upload方法：
upload.single('key值'):當傳遞單個檔案的時候，對檔案的解析，該附件將被儲存到req.file屬性中
upload.array('key值', maxCout)：當傳遞一組檔案的時候，對檔案的解析 key值是前端傳遞的key值， maxcout是最多能傳遞多少個檔案，如果附件的數量大於maxCount則丟擲異常。檔案陣列將被儲存到req.files屬性中。
upload.fields([{ name: 'key值', maxCount: num }, { name: 'key值', maxCount: num }])：當傳遞多個檔案域的時候,對檔案的解析，附件將被儲存到req.files屬性中（是一個物件陣列）
.any()接收所有提交的資料，儲存到req.files屬性中
4、file為上傳欄位名稱，當使用form表單submit方式上傳時，必須與表單上傳的name屬性保持一致。表單記得加上 enctype=‘multipart/form-data’
客戶端傳遞（使用formdata模擬表單提交資料）
//建立一個表單資料物件
var formData = new FormData();
var goods_name = $("#goods_name");
var goods_des = $("#goods_des");
var goods_price = $("#goods_price");
var goods_img = $("#goods_img");
var goods_imgs = $("#goods_imgs");
//使用append方法將資料提交到formdata中
formData.append("goodsName",goods_name.val());
formData.append("gooddsDes",goods_des.val())
formData.append("goodsPrice",goods_price.val())
formData.append("goodsImg",goods_img[0].files[0])
//使用便利遍歷將多個檔案/圖片遍歷出來
for(var i=0;i<goods_imgs[0].files.length;i++){
formData.append("goodsImgs",goods_imgs[0].files[i])
}
//發起ajax請求
$.ajax({
type:"post",
url:"/api/goods/addGoods",
cache: false,//不讀取快取中的結果 true的話會讀快取其實post本身就不會讀取快取中的結構
processData: false,//預設情況下，通過data選項傳遞進來的資料，如果是一個物件(技術上講只要不是字串)，都會處理轉化成一個查詢字串，以配合預設內容型別 "application/x-www-form-urlencoded"。如果要傳送 DOM 樹資訊或其它不希望轉換的資訊，請設定為 false。
contentType: false,//資料編碼格式不使用jquery的方式 為了避免 JQuery 對其操作，從而失去分界符，而使伺服器不能正常解析檔案。data:formData,
success:$.proxy(this.handleSuccCb)
})
上一篇是關於formdata的詳解