使用vue,mavon-editor 上传图片怎么就行图片回显,将后端传递的路径替换,并且不影响其他内容
时间: 2023-12-21 10:06:29 浏览: 130
mavon-editor 使用教程 - 副本.md
可以通过以下步骤实现:
1. 在上传图片成功后,后端返回图片的路径。
2. 在前端,使用 `axios` 或其他方式将图片上传到后端,并获取到后端返回的图片路径。
3. 在 `mavon-editor` 的 `uploadImg` 方法中,将获取到的图片路径替换到需要上传的图片位置。
示例代码如下:
```html
<template>
<mavon-editor ref="editor" v-model="content" @imgAdd="handleImgAdd" />
</template>
<script>
import axios from 'axios';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
export default {
components: { mavonEditor },
data() {
return {
content: '',
};
},
methods: {
handleImgAdd(file, callback) {
const formData = new FormData();
formData.append('file', file);
axios.post('/api/uploadImage', formData).then(response => {
const imgUrl = response.data.url;
const imgMarkdown = `![${file.name}](${imgUrl})`;
callback(imgMarkdown);
});
},
},
};
</script>
```
在上面的代码中,我们使用 `axios` 将图片上传到后端,然后通过 `response.data.url` 获取图片的路径,最后将图片路径替换到需要上传的图片位置,并将替换后的 Markdown 代码传递给 `mavon-editor` 的 `callback` 方法,完成图片上传和回显。
阅读全文