本項(xiàng)目為系列博客被环，目前有以下系列
- Node.js+Express+MongoDB 建站實(shí)例（1）-- 網(wǎng)站初始化
- Node.js+Express+MongoDB 建站實(shí)例（2）-- 登錄模塊
- [Node.js+Express+MongoDB 建站實(shí)例（3）-- 上傳圖片及其他模塊]
- Node.js+Express+MongoDB 建站實(shí)例（4）-- react構(gòu)建前端頁面對(duì)接接口：項(xiàng)目源碼
本文源碼請(qǐng)看 https://github.com/jiaoyanlin/myNodeProject/tree/c5237306394c4896aee804a3d378dd2a92be24e0
其他模塊
由于上兩篇文章中已經(jīng)將如何往數(shù)據(jù)庫中插入糙及、修改數(shù)據(jù)等做了演示，因此這篇文章就不再重復(fù)了蛤售，主要記錄一些開發(fā)時(shí)遇到的問題及解決方案（具體實(shí)現(xiàn)方法看源碼）丁鹉。
1妒潭、 這邊推薦使用postman進(jìn)行接口測(cè)試悴能，postman網(wǎng)上有很多教程可以看，主要提一下雳灾，在使用postman提交post請(qǐng)求時(shí)漠酿，注意body中選擇x-www-form-urlencoded模式來發(fā)送，否則后臺(tái)這邊無法通過req.body.xxx來獲取參數(shù)谎亩。
2炒嘲、 使用mongodb查詢數(shù)據(jù)庫時(shí)我們有時(shí)會(huì)使用_id作為參數(shù)進(jìn)行查詢，但是直接將它作為條件是查詢不到的匈庭，應(yīng)該按照下方這樣來查詢：
var ObjectId = require('mongodb').ObjectId;
...
// 更新個(gè)人信息
exports.updateUserinfo = function (req, res, next) {
let newData = {
"name": req.body.name,
"phone": req.body.phone,
"motto": req.body.motto
};
if (!testTel(req.body.phone)) {
return res.json({
"code": 401,
"message": "手機(jī)號(hào)碼格式不正確"
})
}
// 注意這里用ObjectId(req.cookies.id)
db.updateMany('users', { "_id": ObjectId(req.cookies.id) }, newData, function (err, result) {
if (err) {
return res.json({
"code": 401,
"message": "更新失敗"
})
}
return res.json({
"code": 200,
"message": "更新成功"
})
})
}
圖片上傳模塊
1夫凸、安裝依賴
npm install formidable silly-datetime --save
2、前端使用ajax的formdata進(jìn)行上傳圖片（為了測(cè)試也可直接用postman上傳阱持，注意body中選擇form-data）
<div>圖片上傳：<input type="file" name="fileToUpload" id="fileToUpload" class="fileupload" /></div>
<img style="width: 100px;" />
// 圖片上傳
$('.fileupload').change(function(event) {
if ($('.fileupload').val().length) {
var fileName = $('.fileupload').val();
var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();
if (extension == ".jpg" || extension == ".png") {
var data = new FormData();
data.append('fulAvatar', $('#fileToUpload')[0].files[0]);
$.ajax({
url: '/api/uploadImg',
type: 'POST',
data: data,
cache: false,
contentType: false, //不可缺參數(shù)
processData: false, //不可缺參數(shù)
success: function(data) {
console.log('-------upload img:', data);
},
error: function() {
console.log('error');
}
});
}
}
});
注意：由于我們?cè)賏pp.js中用了靜態(tài)服務(wù)app.use(express.static(path.join(__dirname, ‘public’)));夭拌，
將所有的靜態(tài)資源文件都托管到public文件夾里。后續(xù)操作中如果需要調(diào)用public中的圖片什么的衷咽，
無論你在哪個(gè)文件夾鸽扁，都把自己當(dāng)成是在public文件夾即可。
例如這邊可以使用類似
來引用public下avatar中的圖片
3镶骗、后臺(tái)項(xiàng)目中使用：
// routes/index.js中
// 上傳圖片
router.route('/api/uploadImg').all(verifyToken).post(api.uploadImg);
// routes/api.js中
const formidable = require('formidable');
var sd = require("silly-datetime");
const fs = require('fs');
var AVATAR_UPLOAD_FOLDER = '/avatar/'; // 上傳圖片存放路徑桶现，注意在本項(xiàng)目public文件夾下面新建avatar文件夾
// 上傳圖片
exports.uploadImg = function (req, res, next) {
var form = new formidable.IncomingForm(); //創(chuàng)建上傳表單
form.encoding = 'utf-8'; //設(shè)置編輯
form.uploadDir = 'public' + AVATAR_UPLOAD_FOLDER; //設(shè)置上傳目錄
form.keepExtensions = true; //保留后綴
form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
form.parse(req, function (err, fields, files) {
if (err) {
return res.json({
"code": 500,
"message": "內(nèi)部服務(wù)器錯(cuò)誤"
})
}
// 限制文件大小 單位默認(rèn)字節(jié) 這里限制大小為2m
if (files.fulAvatar.size > form.maxFieldsSize) {
fs.unlink(files.fulAvatar.path)
return res.json({
"code": 401,
"message": "圖片應(yīng)小于2M"
})
}
var extName = ''; //后綴名
switch (files.fulAvatar.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
if (extName.length == 0) {
return res.json({
"code": 404,
"message": "只支持png和jpg格式圖片"
})
}
//使用第三方模塊silly-datetime
var t = sd.format(new Date(), 'YYYYMMDDHHmmss');
//生成隨機(jī)數(shù)
var ran = parseInt(Math.random() * 8999 + 10000);
// 生成新圖片名稱
var avatarName = t + '_' + ran + '.' + extName;
// 新圖片路徑
var newPath = form.uploadDir + avatarName;
// 更改名字和路徑
fs.rename(files.fulAvatar.path, newPath, function (err) {
if (err) {
return res.json({
"code": 401,
"message": "圖片上傳失敗"
})
}
return res.json({
"code": 200,
"message": "上傳成功",
result: AVATAR_UPLOAD_FOLDER + avatarName
})
})
});
}
上傳文件測(cè)試后，可以到上傳文件夾public/avatar下查看是否成功
源碼： GitHub
下一篇文章打算使用react簡單構(gòu)建前端頁面鼎姊，使用這邊開發(fā)的接口進(jìn)行開發(fā)骡和。
