【精品】使用 v-md-editor 上传图片

简介

v-md-editor 是基于 Vue 开发的 markdown 编辑器组件，即支持vue2也支持vue3。

• gitee：https://gitee.com/ckang1229/vue-markdown-editor
• 文档：https://code-farmer-i.github.io/vue-markdown-editor/zh/

服务器端代码

@RestController
@RequestMapping("/file")
public class FileUploadController {/*** 上传文件，指定上传到的目录并重命名** @param file* @param path 文件在服务器的路径【不带问号后面的坐标】，如果路径不存在，会自动创建* @return*/@SaCheckLogin@PostMapping("/upload")@LogAnno(value = "上传文件", opt = OptEnum.INSERT)public ResultBean<String> upload(MultipartFile file, String path) {// ……return ResultBeanUtil.success(url).setMsg("文件上传成功！");}
}

上传成功返回数据示意：

[{"code": 200,"msg": "文件上传成功！","data": "http://127.0.0.1:9005/tiku-resources/ae83c411083848a69efccf7094183348.png"}
]

vue页面

<template><div><!-- 编辑 --><v-md-editormode="edit"v-model="content"height="400px":disabled-menus="[]"@upload-image="handleUploadImage"></v-md-editor><!-- 预览 --><v-md-editor v-model="content" mode="preview" /></div>
</template><script setup lang="ts" name="markdown">
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import { println } from "@/utils/util";
import { uploadPic } from "../course/api/course";
import { ResultEnum } from "@/utils/constant";
const content = ref(`请输入内容`);// 请求头：图片上传时需要登录权限
const handleUploadImage = (event, insertImage, files) => {// 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容const formData = new FormData();formData.append("file", files[0]);uploadPic({ file: formData }).then(res => {println("文件上传：", res);if (res && res.code === ResultEnum.SUCCESS && res.data) {insertImage({ url: res.data });}});
};
</script>

上面代码使用FormData通过axios把文件上传到服务器，然后通过url进行图片的回显。FormData介绍：FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，创建的FormData对象会自动将form中的表单值也包含进去，包括文件内容也会被编码之后包含进去。然后后端就可以通过MartpartFile进行接收该图片文件然后进行文件的 存储 。

v-md-editor 常用API属性：

• text:需要解析预览的 markdown 字符串。
• v-model:支持双向绑定。
• mode:模式。可选值：edit(纯编辑模式) editable(编辑与预览模式) preview(纯预览模式)。
• default-fullscreen:是否默认开启全屏。
• disabled-menus:禁用的菜单。默认值为 image 工具栏下的上传本地图片菜单