04个人博客笔记markdown编辑器以及发布文章、上传图片的实现

markdown编辑器的实现

1.依赖库 marked
vue-simplemde
2.参考https://segmentfault.com/a/11&＃8230;，并对其进行改进和完善。

上传图片

1.依赖库 multer
2.实现

// 上传图片相关存储在./uploads文件夹下
var multer = require('multer')
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads')
},
filename: (req, file, cb) => cb(null, `${Date.now()}-${file.originalname}`)
});

// 上传图片 单图
router.post('/user/pulishArticle',upload.single('file'), (req, res, next) => {
if (!req.file) {
responseData.success = false
responseData.message = '上传失败'
res.json(responseData)
} else {
responseData.success = true
responseData.message = '上传成功'
responseData.data = {
'imageUrl': req.file.filename
}
res.json(responseData)
}
})
// 上传图片 多图
router.post('/user/mutiablePic',upload.array('file', 5), (req, res, next) => {
if (!req.files[0]) {
responseData.success = false
responseData.message = '上传失败'
res.json(responseData)
} else {
responseData.success = true
responseData.message = '上传成功'
let arr = []
req.files.forEach((item) => {
arr.push({'imageUrl': item.filename})
})
responseData.data = arr
res.json(responseData)
}
})

3.上传图片部分要注意在index.js中设置图片为静态资源文件app.use(express.static(&＃8216;uploads&＃8217;))，不然上传图片会报401.
4.文章部分的数据库操作参考demo

项目上传  github 每次提交都是一个分支

线上地址