以下是实现的步骤：
1
. 在
前端Vue中使用MavonEditor组件，并监听它的
图片上传事件：
```
vue
<template>
<div>
<mavon-editor @
imgAdd="handle
ImgAdd"></mavon-editor>
</div>
</template>
<script>
export default {
methods
: {
handle
ImgAdd(
imgFile, insert
ImgCallback) {
// 将
图片文件上
传到后端
const formData = new FormData()
formData
.append('image',
imgFile)
axios
.post('/api/upload', formData)
.then(response => {
// 获取后端返回的
图片URL
const
imgUrl = response
.data
.url
// 在编辑器中插入
图片
insert
ImgCallback(
imgUrl)
})
}
}
}
</script>
```
2
. 在后端Express中定义一个上传
图片的API路由，使用`multer`中间件来处理
图片上传，并将
图片路径返回给
前端：
```
javascript
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插入到编辑器中：
```
vue
<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中回显已保存的文章内容中的
图片。
扫一扫
6761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
