使用vue mavon-editor 上传图片事件如何将图片传入后端express，express后端写入图片，并在mavon-editor组件上进行图片回显

首先，在前端使用 mavon-editor 上传图片，需要将图片转换为 base64 编码的字符串，然后将其作为参数传递给后端。可以通过 FileReader 对象实现图片转换为 base64 编码的字符串，代码如下：

// 选择图片并读取
let file = e.target.files[0]
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
  let imgBase64 = reader.result // 图片base64编码字符串
  // 将base64编码字符串传递给后端
  axios.post('/upload-image', { imgBase64 }).then(res => {
    // 处理回显
    // ...
  })
}

在后端使用 Express 接收图片，并将其写入服务器本地。可以使用 `fs` 模块的 `writeFile()` 方法实现文件写入，代码如下：

const fs = require('fs')

app.post('/upload-image', (req, res) => {
  let imgBase64 = req.body.imgBase64
  // 去除data:image/png;base64,前缀
  let base64Data = imgBase64.replace(/^data:image\/\w+;base64,/, '')
  // 将base64编码转换为buffer对象
  let imgBuffer = new Buffer.from(base64Data, 'base64')
  // 写入文件
  let filename = Date.now() + '.png' // 设置文件名，避免重复
  fs.writeFile(filename, imgBuffer, err => {
    if (err) {
      res.send({ code: 500, msg: '写入文件失败' })
    } else {
      res.send({ code: 200, msg: '上传成功' })
    }
  })
})

最后，在前端处理回显。可以使用 mavon-editor 的 `afterUpload` 回调函数，接收后端返回的图片地址，并将其插入到编辑器中，代码如下：

<template>
  <div>
    <mavon-editor
      v-model="content"
      @after-upload="afterUpload"
    ></mavon-editor>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '' // 编辑器内容
    }
  },
  methods: {
    // 图片上传后回调
    afterUpload(info) {
      if (info.code === 200) {
        let imgUrl = 'http://localhost:3000/' + info.filename // 图片地址
        let str = `![${info.filename}](${imgUrl})` // Markdown图片语法
        this.content += str // 将图片插入到编辑器中
      } else {
        console.log(info.msg)
      }
    }
  }
}
</script>

在上面的代码中，`afterUpload` 回调函数接收后端返回的信息，如果上传成功，则将图片地址和 Markdown 图片语法组合成字符串，插入到编辑器中进行回显。否则，输出错误信息。