【nodejs】--express的中間件multer實現圖片文件上傳--【XUEBIG】

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的詳解