当前位置: 首页 > news >正文

mavon-editor编辑器与图片上传

mavon-editor编辑器与图片上传

图片上传是一个常用的功能,今天我们来实现基于Vue的Markdown编辑器——mavon-editor的图片上传功能。


一、安装与引入

1. 首先在命令行安装mavon-editor编辑器。

npm install mavon-editor --save

2. 在main.js中引入。

import editor from "mavon-editor";
import "mavon-editor/dist/css/index.css"Vue.use(editor)

二、编写前端vue页面,并添加路由

1. views下新建AddBlog.vue文件,在页面中,引入,即可看到Markdown编辑器。@imgAdd和@imgDel分别为添加图片和删除图片,具体上传方法参考官网:mavon-editor。包含图片上传和图片回显部分。具体代码如下:

<template><div><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="博客标题" prop="title"><el-input v-model="ruleForm.title"></el-input></el-form-item><el-form-item label="博客摘要" prop="description"><el-input type="textarea" v-model="ruleForm.description"></el-input></el-form-item><el-form-item label="博客正文" prop="content"><mavon-editorv-model="ruleForm.content"ref="md"@imgAdd="imgAdd"@imgDel="imgDel"@save="saveMavon"></mavon-editor></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div>
</template><script>export default {name: "AddBlog",data() {return {ruleForm: {title: '',description: '',content: '',html: ''},rules: {title: [{ required: true, message: '请输入博客标题', trigger: 'blur' },{ min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }],description: [{ required: true, message: '请简述博客内容', trigger: 'change' }],content: [{ required: true, message: '请输入博客正文', trigger: 'change' }],}};},methods: {saveMavon(value,render){console.log("this is render"+render);console.log("this is value"+value);console.log(this.$refs.md.d_render);},// 将图片上传到服务器,返回地址替换到md中imgAdd(pos, $file) {var _this = thisvar formdata = new FormData();formdata.append('image', $file);this.$axios.post("/blog/upload",formdata,{headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)if (response.status === 200) {var url = response.data.data;_this.$refs.md.$img2Url(pos,url)}})},imgDel(pos) {},submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {const _this = this_this.ruleForm.content = _this.$refs.md.d_value;this.$axios.post("/blog/add",this.ruleForm,{headers: {"Authorization": localStorage.getItem("token")}})_this.$router.push("/userIndex")} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script><style scoped></style>

三、后端上传逻辑

代码如下:

final static String PIC_PATH = "static/img/"; //图片存放的相对于项目的相对位置/***上传图片*/@PostMapping("/upload")public Result uploadPic(MultipartHttpServletRequest multiRequest, HttpServletRequest request){SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd"); //生成日期格式String datePrefix = dateFormat.format(new Date()); //生成当前日期作为前缀String savePath = "src/main/resources/" + PIC_PATH; // 存储路径File folder = new File(savePath+datePrefix); //生成带当前日期的文件路径if(!folder.isDirectory()){folder.mkdirs();}String randomName = multiRequest.getFile("image").getOriginalFilename(); //获取图片名//生成随机数确保唯一性,并加上图片后缀String saveName = UUID.randomUUID().toString() + randomName.substring(randomName.lastIndexOf("."),randomName.length());String absolutePath = folder.getAbsolutePath(); //转换成绝对路径try {File fileToSave = new File(absolutePath + File.separator + saveName);multiRequest.getFile("image").transferTo(fileToSave); //图片存储到服务端String returnPath = request.getScheme() + "://"+ request.getServerName()+":"+request.getServerPort()+ "/img/" + datePrefix +"/"+ saveName;return Result.success(200,"上传成功",returnPath);}catch (Exception e){e.printStackTrace();}return Result.fail(500,"上传失败",null);}

其中,接收的文件类型为multipartFile。逻辑为:

上传阶段:确定上传的文件的存储路径,我存放在项目资源文件resources/static/img下,同时,使用日期作为区分目录,如果目录不存在,则新建日期目录,并获取到该目录的绝对路径(图片最终保存路径)。随后获取到上传图片名称,使用UUID随机生成文件名并加上图片名的后缀(即图片类型)作为上传图片的最终名称。使用multirequest将图片保存到图片最终保存路径下。上传阶段完成。

回显阶段:由于我的图片保存在项目相对路径resources/static/img下,而springboot默认静态资源路径包含static,因此只需要通过本地地址+/img/日期/文件名就能访问到图片。所以我依照该形式,在图片上传后返回图片地址给前端,前端拿到该地址就能回显图片。

四、测试结果

前端图片上传后回显!
在这里插入图片描述
后端图片以上传到指定路径
在这里插入图片描述

五、不足

目前能够完成图片上传,但回显存在时延,应该是springboot需要时间热更新资源。体验欠佳。


http://www.taodudu.cc/news/show-6105736.html

相关文章:

  • 编辑器111
  • 题注中的图一.1变成图1.1
  • MySQL数据库实验(四):E-R图实例讲解
  • (一)1. 数据流图(DFD)概念及画法
  • 如何把word中的多级编号中的题注“图一.1”自动变成“图1.1”
  • 图一:入门篇
  • (宏) Word图片题注“图一-1”转化为“图1-1”
  • app性能测试怎么做
  • PCB布局和绘制的关键操作
  • 什么是CAD的模型和布局?
  • 阿里巴巴矢量图标库icon图标在线引用
  • 精灵随着鼠标的移动而移动
  • 【cocos2D-X】Plist使用 实现 移动精灵多图片动画
  • 移动设备上“精灵图”的制作适配
  • cocos2dx 精灵的移动(2)
  • Cocos2d-x 2.0 百例精讲:如何让一个精灵跟随触点移动
  • 在屏幕的任意位置拖拽,控制精灵移动
  • 精灵的移动效果,旋转效果
  • 【JavaScript】实现移动小精灵
  • 让视角随着精灵移动
  • 移动设备上“精灵图”的制作
  • 移动端精灵图的使用
  • Cocos2d-x随记(2)-精灵移动
  • buntu22.04安装WPS中文版(一百一十八)
  • 数数
  • 视网膜数据集(2)Messidor
  • realsense 相机的部分信息获取
  • Linux线程数和系统线程数查看
  • 数的表示与运算
  • 如何判断一个数是否是NaN