express上傳圖片中間件

上傳圖片

使用一箇中間件(multer),它依賴於express;

文件提交方式必須是post提交;

安裝

npm install --save multer

引入模塊(它依賴於express)

//第一步
//引入express並配置
const express = require('express');
const app = express();
//添加端口號
app.listen(3000, function () {
    console.log('server is runing port 3000');
});

//第二步 此配置要在使用相對應的upload方法文件中配置
const multer = require('multer');//加載模塊
//第三步:配置磁盤存儲引擎
//圖片的上傳需要藉助 磁盤存儲引擎 來將用戶上傳的圖片在服務端保存
//磁盤存儲引擎 (DiskStorage)可以讓你控制文件的存儲。

//以下配置要在掛載路由之前
var storage = multer.diskStorage({
    //表示圖片上傳後將保存的路徑地址
    //設置上傳文件路徑後,uploads文件夾將會在服務器相對應的路徑下創建
    //由於服務器文件夾的權限不同,如果自動創建失敗,可以手動在相應的路徑下手動創建文件夾
  destination: function (req, file, cb) {
    cb(null, './uploads')
  },
    //給上傳的文件進行重命名,獲取添加後綴名
    //自己拼接的隨機字符串,如果有重複,建議去買彩票;
   //let radoms= new Date().getTime()+Math.random().toString(36).substr(2).slice(1,6)+Math.random().toString(36).substr(2).slice(1,6);
  //給上傳的文件進行重命名,獲取添加後綴名
    filename: function (req, file, cb) {
        //爲了防止小概率文件名相同,可以再文件名當中拼接當前的時間戳,或在時間戳後面添加隨機數,
        let data2=new Date().getTime()+Math.random().toString(36).substr(2).slice(1,6)+Math.random().toString(36).substr(2).slice(1,6);
        //file.fieldname + '-' + Date.now()表示對文件的名字進行命名,
        let names=file.originalname.split('.');
        let file_type=['jpg','gif','png','jpeg'];
        //給上傳的文件命名並進行上傳,在此之前對文件進行判斷,如果文件不符合要就,禁止上傳
        cb(null, data2+'.'+ names[names.length-1]);
    }
})

var upload = multer({ storage: storage })

在路由中的配置

router.post('/fabu_post_page/',upload.single('hehe'),fabu_service.user_img_sumbit_page);

業務邏輯模塊

//上傳圖片
exports.user_img_sumbit_page=function(req,res){
    res.send({
        err:1,
        imgname:req.file.filename,
        msg:'上傳圖片成功'
    })
};

前端提交頁面

var file_submin = document.getElementById('wenjian');//文件input的id
							let file_submins = file_submin.files;
		 					var formdata = new FormData();
		 					formdata.append('hehe', file_submins[0])//hehe表示提交的文件name
		 					$.ajax({
		 						type: "post",
		 						url: "/fabu_post_page/",
		 						cache: false, //需不需要創建緩存    不必須
		 						data:formdata,
		 						processData: false, //不需要對數據做處理        必須
		 						contentType: false, //用表單數據創建的fromdata已經聲明過enctype,所以這裏設置爲false
		 						async: true,
		 						success: function(data) {
		 							console.log(data);
		 							
		 						}
		 					});

前端文件提交局部代碼

上傳圖片form表單必須設置enctype=“multipart/form-data”

也可以在ajax提交的時候通過contentType設置

<form enctype="multipart/form-data" class="form-horizontal">
										<div class="hr-line-dashed"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label">資訊配圖</label>
											<div class="col-sm-10">
												<input type="file" class="form-control" name="hehe" id="wenjian">
												<input type="text" id="token02" name="usersys_token" value="" style="display: none;" />
											</div>
										</div>

										<div class="hr-line-dashed"></div>
										<div class="form-group">
											<div class="col-sm-4 col-sm-offset-2">
											</div>
										</div>
									</form>