vue使用mavon-editor将本地图片base64格式上传express后端如何传值，后端如何把图片存到服务器指定目录下

首先，前端需要将图片转换成 base64 格式后，使用 FormData 对象将图片数据传给后端。

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileInputChange">
    <button @click="uploadImage">上传图片</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      imageFile: null,
      imageUrl: null
    }
  },
  methods: {
    handleFileInputChange(event) {
      this.imageFile = event.target.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(this.imageFile)
      reader.onload = () => {
        this.imageUrl = reader.result
      }
    },
    async uploadImage() {
      const formData = new FormData()
      formData.append('image', this.imageFile)
      try {
        const response = await axios.post('/upload', formData)
        console.log(response.data)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

在后端，我们可以使用 `multer` 中间件来处理上传的图片文件。`multer` 可以将接收到的文件保存到指定目录下，并将文件信息添加到 `req.file` 中，方便后续处理。

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

const app = express()

// 创建一个存储引擎
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 指定存储目录
    cb(null, './uploads/')
  },
  filename: function (req, file, cb) {
    // 指定文件名
    cb(null, Date.now() + '-' + file.originalname)
  }
})

// 创建一个上传中间件
const upload = multer({ storage: storage })

// 处理上传请求
app.post('/upload', upload.single('image'), (req, res) => {
  console.log(req.file)
  res.send('上传成功')
})

app.listen(3000, () => {
  console.log('Server is listening on http://localhost:3000')
})

这样我们就可以将前端传过来的图片文件保存到指定目录下了。