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

以下是实现的步骤：

1. 在前端Vue中使用MavonEditor组件，并监听它的图片上传事件：

<template>
  <div>
    <mavon-editor @imgAdd="handleImgAdd"></mavon-editor>
  </div>
</template>

<script>
export default {
  methods: {
    handleImgAdd(imgFile, insertImgCallback) {
      // 将图片文件上传到后端
      const formData = new FormData()
      formData.append('image', imgFile)

      axios.post('/api/upload', formData).then(response => {
        // 获取后端返回的图片URL
        const imgUrl = response.data.url
        // 在编辑器中插入图片
        insertImgCallback(imgUrl)
      })
    }
  }
}
</script>

2. 在后端Express中定义一个上传图片的API路由，使用`multer`中间件来处理图片上传，并将图片路径返回给前端：

const express = require('express')
const multer = require('multer')
const path = require('path')

const app = express()

// 配置multer中间件，用于处理图片上传
const upload = multer({
  storage: multer.diskStorage({
    destination: function(req, file, cb) {
      cb(null, './uploads/')
    },
    filename: function(req, file, cb) {
      const extname = path.extname(file.originalname)
      const filename = file.fieldname + '-' + Date.now() + extname
      cb(null, filename)
    }
  })
})

// 定义图片上传API路由
app.post('/api/upload', upload.single('image'), (req, res) => {
  const imageUrl = '/uploads/' + req.file.filename
  res.json({ url: imageUrl })
})

// 启动服务器
app.listen(3000, () => {
  console.log('Server started at http://localhost:3000')
})

3. 在前端Vue中处理图片回显的逻辑，将后端返回的图片URL插入到编辑器中：

<template>
  <div>
    <mavon-editor ref="editor"></mavon-editor>
  </div>
</template>

<script>
export default {
  mounted() {
    // 从后端获取已保存的文章内容
    axios.get('/api/article').then(response => {
      const articleContent = response.data.content
      // 将文章内容插入到编辑器中
      this.$refs.editor.setContent(articleContent)
    })
  }
}
</script>

这样就完成了在Vue中使用MavonEditor组件上传图片并将图片保存到Express后端的流程，同时也实现了在Vue中回显已保存的文章内容中的图片。