vue中利用simplemde实现markdown编辑器（增加图片上传功能）

<textarea id="simplemde"></textarea>

var simplemde = new SimpleMDE({
   el: document.getElementById(simplemde)
  })

simplemde.codemirror.on("change", () => {
   this.content = simplemde.value()
  })

<input style="display:none" accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="upInput" ref="upInput">

var input = this.$refs.upInput
var formData = new FormData()
formData.append("i", input.files[0])
var config = {
   headers: {
    "Content-Type": "multipart/form-data"
   }
  }
this.$axios.post("/data/myupload", formData, config)

var multer = require('multer')
    //定义存储器
  var storage = multer.diskStorage({
  //存储路径
  destination: function (req, file, cb) {
    cb(null, '../static/upload/')
  },
  //存储文件名
  filename: function (req, file, cb) {
    cb(null, `${Date.now()}-${file.originalname}`)
  }
  })
  //运用存储器
  var upload = multer({ storage: storage })

  // 接受单图的上传
  router.post('/data/myupload', upload.single('i'), function (req,  res, next) {
  //将存储后的文件名发还给前端
  res.send(req.file.filename)
  });

this.$axios.post("/data/myupload", formData, config).then((res)=> {
  var urlname=`![](/static/upload/${res.data})`
  simplemde.value(`${this.content}\n${urlname}\n`)
 })

var input = this.$refs.upInput
input.addEventListener("change", () => {
 var formData = new FormData()
 formData.append("i", input.files[0])
 var config = {
  headers: {
   "Content-Type": "multipart/form-data"
  }
 }
 this.$axios.post("/data/myupload", formData, config).then((res)=> {
  var urlname=`![](/static/upload/${res.data})`
  simplemde.value(`${this.content}\n${urlname}\n`)
 })
})

this.contentMarkdown = SimpleMDE.prototype.markdown(content)

<div v-html="contentMarkdown"></div>