Vue3 使用v-md-editor如何动态上传图片了

前端代码:

<v-md-editor
:autofocus="true"
v-model="blog.content"
height="510px"
placeholder="请输入内容"
left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | image | save "
:disabled-menus="[]"
@upload-image="handleUploadImage"
>
</v-md-editor>

按我以上配置后,你把图片插入或者从本地拖入,就可以激发upload-image绑定的函数,我这的名称为:handleUploadImage

先看看这个图片编辑时的图片吧

大致流程图

在setup看看这个函数(这是我写好的)

files:表示你拖入的图片文件,可以是多个,也可以是一个

insertImage:url就表示你需要回显的地址;desc就是名称;markdown语法:![desc](url)

function handleUploadImage(event,insertImage,files){
for(let i in files){
const formData = new FormData();
formData.append('file', files[i]);
proxy.$axios.post(`${proxy.PATH}/uploadImg`,formData).then(
response => {
insertImage({
url:response.data,
desc: 'DESC',
})
},
error => {
console.log('请求失败了',error.message)
}
)
}
}

有没有人和我一样去看过这个file长什么样子

可以看到我上面发送了一个请求到后端,标签带上了这个文件;就是下面这段代码

 proxy.$axios.post(`${proxy.PATH}/uploadImg`,formData).then(
response => {
insertImage({
url:response.data,
desc: 'DESC',
})
},
error => {
console.log('请求失败了',error.message)
}
)

后端的代码:

请求的位置

package com.mhy.blog.controller;
import com.mhy.blog.utils.ConstUtils;
import com.mhy.blog.utils.FileUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.util.Objects; @RestController
public class FileController {
@PostMapping("/uploadImg")
public String img(@RequestParam(value = "file") MultipartFile file){
try{
return FileUtils.uploadImg(file,
ConstUtils.SAVE_IMG_PATH,
Objects.requireNonNull(file.getOriginalFilename()),
ConstUtils.REQUEST_IMG_PATH);
}catch (Exception e){
e.printStackTrace();
return ConstUtils.IMG_UPLOAD_FAILURE;
}
}
}

注意里面有我定制的一些常量:

public static String SAVE_IMG_PATH = "D:\\JAVAIDEA\\Blog\\java\\blog\\src\\main\\resources\\public\\img\\";

public static String REQUEST_IMG_PATH = "http://localhost:8888/blog/img/";
public static String IMG_UPLOAD_FAILURE = "图片上传失败";

看看这个工具方法:FileUtils.uploadImg

package com.mhy.blog.utils;

import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.util.Random;
import java.util.UUID; public class FileUtils { public static String uploadImg(MultipartFile file, String path1, String name, String path2){
// 通过uuid产生一个图片名字
String uuid = UUID.randomUUID().toString().trim().replaceAll("-","");
String imgName = uuid + name;
// 这是我随机选择了一文件夹 这里只是我个人爱好
String code = Integer.toString(new Random().nextInt(5) + 1);
// 拼接路径
String imgPath = path1 + "img" + code + "\\";
String requestPath = path2 + "img" + code + "/"; try {
// 上传操作
File imgFile = new File(imgPath, imgName);
file.transferTo(imgFile);
} catch (Exception e) {
e.printStackTrace();
}
// 返回图片的路就
return requestPath + imgName;
}
}

后端图片的位置

测试:

顺便附带上我的main.js吧

// markdown 的引入
import VueMarkdownEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import VMdpreview from '@kangc/v-md-editor/lib/preview'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css' // github主题
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
import '@kangc/v-md-editor/lib/theme/style/github.css'
// 引入 highlight核心代码
import hljs from 'highlight.js/lib/core'
// 引入代码高亮
import json from 'highlight.js/lib/languages/json'
import java from 'highlight.js/lib/languages/java'
import javascript from 'highlight.js/lib/languages/javascript'
import c from 'highlight.js/lib/languages/c'
import cpp from 'highlight.js/lib/languages/cpp'
import armasm from 'highlight.js/lib/languages/armasm'
// 按需引入 代码高亮
hljs.registerLanguage('json',json)
hljs.registerLanguage('java',java)
hljs.registerLanguage('javascript',javascript)
hljs.registerLanguage('c',c)
hljs.registerLanguage('cpp',cpp)
hljs.registerLanguage('armasm',armasm) // 配置
VMdpreview.use(vuepressTheme)
VueMarkdownEditor.use(githubTheme,{
Hljs: hljs,
extend(md){
// 扩展插件
}
}) const app = createApp(App)
app.use(VueMarkdownEditor)
app.use(VMdpreview)
app.mount('#app')

Vue3 使用v-md-editor如何动态上传图片了的更多相关文章

  1. PHPCMS调用form类编辑器editor函数动态上传图片附件

    http://w3note.com/web/49.html phpcms v9的系统类库有一个表单类,它封装了表单的一些组件,如编辑器.图片上传.时间选择器.模板选 择器等,更详细请参考form.cl ...

  2. Markdown编辑器editor.md的使用---markdown上传图片

    http://kindeditor.org/ 确定下有没有查找替换功能 http://pandao.github.io/editor.md/ http://pandao.github.io/edito ...

  3. kendo ui 富文本编辑控件 Editor 实现本地上传图片,并显示

    富文本编辑的组件有很多,大名鼎鼎的KENDO UI中自然也有,但是默认功能中,只能包含网络图片, 而如果要实现本地上传图片,KENDO UI也提供了相应的功能,但必须实现KENDO规定的多个接口, 而 ...

  4. 基于SpringBoot从零构建博客网站 - 集成editor.md开发发布文章功能

    发布文章功能里面最重要的就是需要集成富文本编辑器,目前富文本编辑器有很多,例如ueditor,CKEditor.editor.md等.这里守望博客里面是集成的editor.md,因为editor.md ...

  5. 从并发处理谈PHP进程间通信(二)System V IPC

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

  6. Confd+Consul 动态生成配置文件

    一.Consul安装和配置 1.consul是什么? consul是HashiCorp公司推出的一款工具,主要用于实现分布式系统的服务发现与配置,它提供了以下几个关键特性: 服务发现:Consul客户 ...

  7. Unity3D移动平台动态读取外部文件全解析

    前言: 一直有个想法,就是把工作中遇到的坑通过自己的深挖,总结成一套相同问题的解决方案供各位同行拍砖探讨.眼瞅着2015年第一个工作日就要来到了,小匹夫也休息的差不多了,寻思着也该写点东西活动活动大脑 ...

  8. atom编辑markdown之上传图片

    01atom编辑markdown之上传图片 :first-child { margin-top: 0px; } .markdown-preview:not([data-use-github-style ...

  9. (转)Unity3D移动平台动态读取外部文件全解析

    Unity3D移动平台动态读取外部文件全解析 c#语言规范 阅读目录 前言: 假如我想在editor里动态读取文件 移动平台的资源路径问题 移动平台读取外部文件的方法 补充: 回到目录 前言: 一直有 ...

随机推荐

  1. 关于『进击的Markdown』:第三弹

    关于『进击的Markdown』:第三弹 建议缩放90%食用 我与神明画押,赌这弹markdown又双叒叕拖稿了 %%%Markdown!我的CSDN编辑器崩了呜呜呜 各路英雄豪杰,大家好!  我们要开 ...

  2. 33个非常实用的JavaScript一行代码

    33个非常实用的JavaScript一行代码 一.日期处理 1. 检察日期是否有效 该方法用于检测给出的日期是否有效: const isDateValid = (...val) => !Numb ...

  3. 【物联网天线选择攻略】2.4GHz 频段增益天线模块设备选择

     天线模块设备(antenna)是一种能量变换器,它把传输线上传播的导行波,变换成在无界媒介中传播的电磁波,或者进行相反的变换.对于设计一个应用于射频系统中的小功率.短距离的2.4GHz无线收发设备, ...

  4. iNeuOS工业互联网操作系统,增加搜索应用、多数据源绑定、视图背景设置颜色、多级别文件夹、组合及拆分图元

    目       录 1.      概述... 2 2.      搜索应用... 2 3.      多数据源绑定... 3 4.      视图背景设置颜色... 4 5.      多级别文件夹 ...

  5. JS:this关键字1

    this 代表了当前的对象,哪个对象调用了this所在的函数,this就代表了哪个对象: 例1: function fn(){ var a = 1; console.log(this) } fn() ...

  6. BPC 脚本

    // //税款计算(现金流) // //2018年5月11日修改,去除之前的送数逻辑,新增BADI计算相关科目 // *SELECT(%010804ZH%, "ID", " ...

  7. java基础知识面试总结-部分

    前言 在平时的工作学习中,自己对微服务和springboot基础理论知识关注比较少,在面试中对于面试官的问题,很多基本都不能够达到精准,全面:现将自己面试中的问题做以总结: 1.谈谈你对微服务架构的认 ...

  8. 给你准备好了——50道Python面试题集锦(附答案)

    Python是目前编程领域最受欢迎的语言.在本文中,我将总结Python面试中最常见的50个问题.每道题都提供参考答案,希望能够帮助你在2019年求职面试中脱颖而出,找到一份高薪工作.这些面试题涉及P ...

  9. docker-compose: 未找到命令,安装docker-compose

    1.安装扩展源 sudo yum -y install epel-release 2.安装python-pip模块 sudo yum install python-pip 3.通过命令进行安装 cd ...

  10. idea如何实现Servlet接口

    idea如何实现Servlet接口 project structure ---> Libraries ---> 点击加号+ ----> 找到安装tomcat的目录,再找lib下的se ...