【前后端分离】mavon-editor图片上传删除以及回显

图片上传

图片上传网上都有相关教程这里就不做过多介绍，贴一下我自己的上传代码：

$imgAdd(pos, $file) {
      var formdata = new FormData()
      formdata.append('image', $file)
      //upload这里请自行修改成自己的上传方式
      upload(formdata)
        .then(res => {
          const url = res.message
          this.$refs.md.$img2Url(
            pos,
            url
          )
        })
        .catch(res => {
          console.log(res)
        })
    }

图片删除

图片删除网上看了大部分教程都是删除的缓存里的图片，实在是太坑了，官网也是，只有关于图片上传的教程。所以自己研究了一下，想到了一个办法在删除图片的同时把后台存的图片也删了，重点就是官网教程中提供的pos参数，这里可以看一下pos参数在图片上传时和删除时的值

上传图片时

pos结果是1，原因研究的可以自行研究，实际上这里的pos指的是在数组中的下标

删除图片时

删除图片时居然是个数组，坑啊！不过知道是个数组就好办了，直接pos[0]取出文件路径，然后传给后端删除后台的文件就可以了，这里后台代码就不贴了，贴一下前端代码

$imgDel(pos) {
      var formdata = new FormData()
      formdata.append('url', pos[0])
      delfile(formdata)
        .then(() => {
          Message.success('删除成功')
        })
        .catch(res => {
          console.log(res)
        })
    }

内容回显

这个在网上不是通过把mavon-editor的其他屏蔽只留下预览界面就是使用其他插件来回显，这都太麻烦了，实际上mavon-editor内置了markdown-it，获取方式可以去github上查看：github链接markdown-it用兴趣的可以了解一下，获取到markdown-it实例后用它提供的render函数即可回显文章
这里贴一下我的代码片段：

<!--html-->
<div v-html="content"></div>
<!--js-->
computed: {
    content: function () {
      let markdownIt = mavonEditor.markdownIt
      return markdownIt.render(this.mdContent)
    }
  }
}