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

markdown编辑器的实现

CC99643C-3B79-4A0F-8FDB-B3CFCC0B7749.png

1.依赖库 marked
vue-simplemde
2.参考https://segmentfault.com/a/1190000006939687实现，并对其进行改进和完善。

上传图片

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('uploads'))，不然上传图片会报401.
4.文章部分的数据库操作参考demo

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

线上地址