nodejs 檔案上傳+前端上傳時縮圖 @ code筆記學習中心

var express = require('express');
var router = express.Router();
/* GET home page. */
var fs = require('fs'); //本地檔案讀取新增套件
var multer = require('multer') //前台檔案上傳接受套件
var app = express();
function getNowFormatDate() { //日期格式2018-08-16
var date = new Date();
var seperator1 = "-";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
return currentdate.toString();
}
var datatime = 'public/images/'+getNowFormatDate(); //指定上傳路徑
var storage = multer.diskStorage({ //storage 函數
// 如果你提供的 destination 是一个函数，你需要负责创建文件夹
destination: datatime, //destination 
//给上传文件重命名，获取添加后缀名
filename: function (req, file, cb) {
//fieldname ='picurl'
//originalname='miae035.jpg
//mimetype = image/jpeg
 
var fileFormat = (file.originalname).split("."); //透過split 將主檔名和副檔名分開
//fileformat[0]= miae035
//fileFormat[1]= jpg
var orgname=file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]
//oraname= picurl-151512312.jpg
 
cb(null, orgname);
setTimeout(function(){
fs.rename('public/images/2018-08-16/'+orgname, 'public/images/2018-08-16/' + 'logo.png', function (err) {
if(err) {
// console.error(err);
return;
}
console.log('重命名成功')
});
})//將檔名 改名為logo.png
 
}
 
}); 
var upload = multer({
storage: storage
});//multer執行檔案上傳接受函數
router.post('/upload',upload.single('picUrl'),function(req,res,next){
//picurl為前端傳回來的name
//upload.single 同時只傳一個檔
res.send({ret_code: datatime});
});


router.get('/', function(req, res, next){
res.render('index');
});


module.exports = router;
 
 
//index.ejs
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form method="post" action="/upload" class="form-horizontal" enctype="multipart/form-data">
<div class="hr-line-dashed"></div>
<div class="form-group"><label class="col-sm-2 control-label">图片标题:</label>
<div class="col-sm-5">
<input type="text" name="picTitle" placeholder="必填" class="form-control" required="123">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group"><label class="col-sm-2 control-label">图片类型:</label>
<div class="col-sm-5">
<select class="form-control" name="picType">
<option value="1">gif</option>
<option value="2">图片</option>
<option value="3">美女</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group"><label class="col-sm-2 control-label">对应图片:</label>
<div class="col-sm-5"><input type="file" id="imgInp" name="picUrl" class="form-control"></div>
<!-- post到picUrl type=file action=/uplosd -->
</div>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-9">
<h3></h3>
<button class="btn btn-primary" type="submit">提交</button>
</div>
</div>
</form>
<img style="width:300px;height:300px" id="preview_progressbarTW_img"  />
</body>
</html>
<script>
//點選照片時產生圖片
function readURL(input){
if(input.files && input.files[0]){ //這二個都存在值時才執行
 
var reader = new FileReader(); //FileReader 檔案讀取
reader.onload = function (e) { 
 
$("#preview_progressbarTW_img").attr('src', e.target.result);//e.target.result 為圖片base64碼
}
console.log(input.files[0])
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){ //id=impInp只要改變就觸發
 
readURL(this); //執行readUrl函數
// this代表<input id="imgInp">
});
</script>
FS 更多功能參數文件
https://www.jianshu.com/p/5683c8a93511
nodejs multer+express檔案上傳參考文件
http://www.cnblogs.com/chyingp/p/express-multer-file-upload.html
 
 
r