【node】---multer模塊實現圖片上傳---【巷子】

一、安裝muterl第三方模塊

cnpm install multer --save

 

二、使用

multer在解析完成後，會向request對象中添加一個body對象和一個file或者files對象(上傳多個文件的時候用files對象)，其中body中包含提交的字段，而file中包含上傳的文件 //一、引入express模塊
const express = require("express"); //二、引入multer模塊
const multer = require("multer"); //三、對上傳的文件進行配置
var storage = multer.diskStorage({ //指定文件上傳到服務器的路徑
  destination: function (req, file, cb) { cb(null, '/public/img') }, //指定上傳到服務器文件的名稱
  filename: function (req, file, cb) { cb(null, file.fieldname + '-' + Date.now()) } }) var upload = multer({ storage: storage }) //四、使用 在使用路由的時候調用upload方法 name值是客戶端傳遞的key值
var cpUpload = upload.fields([{ name: 'goodsImg', maxCount: 1 }, { name: 'goodsImgs', maxCount: 8 }]) router.post('/goods/addGoods',cpUpload,goodsController.addgoods );

 

三、upload方法

upload.single('key值'):當傳遞單個文件的時候，對文件的解析 upload.array('key值', maxCout)：當傳遞一組文件的時候，對文件的解析 key值是前端傳遞的key值 maxcout是最多能傳遞多少個文件 upload.fields([{ name: 'key值', maxCount: num }, { name: 'key值', maxCount: num }])：當傳遞多個文件域的時候,對文件的解析

 

四、客戶端傳遞圖片

//建立一個表單數據對象
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"); 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({ 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) })