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. Spring-Batch将CSV文件转为XML文件

    1 介绍 用Spring Batch实现一个简单的需求,将csv文件转换成xml文件. csv文件如下:record.csv username, user_id, transaction_date, ...

  2. C# 通关手册(持续更新......)

    String 常用静态方法 string.Compare(string str1,string str2,bool ignoreCase) 按照字典顺序比较字符串 当str1 > str2时,返 ...

  3. K8S 使用Kubeadm搭建单个Master节点的Kubernetes(K8S)~本文仅用于测试学习

    01.集群规划 系统版本:CentOS Linux release 7.6.1810 (Core) 软件版本:kubeadm.kubernetes-1.15.docker-ce-18.09 硬件要求: ...

  4. VMware虚拟机基于contos 7 搭建lnmp环境全过程

    这个环境也整了几次了,由于本人比较懒,没有记住.找资料很麻烦,就自己动手咯 1.下载VMware虚拟机   (有注册码)     地址:http://www.zdfans.com/5928.html ...

  5. Vmware-Centos7-NAT 网络配置

    首先一句话总结 NAT模式下,将VMware Network Adapter VMnet8的IP改为与虚拟机IP同一网段即可. 操作步骤 1. 打开虚拟网络编辑器 2. 配置NAT 选择NAT模式,取 ...

  6. 一文理解OpenStack网络

    摘要:如果你能理解OpenStack的网络,那么对于其他云平台的网络,应该也可以通过分析后理解掌握了. 本文分享自华为云社区<<跟唐老师学习云网络> - OpenStack网络实现& ...

  7. Django快速入门之项目配置

    开始 环境 python:3.6.2 django:2.0.5 跑起来 用pycharm导入或新建一个Django项目,在目录中存在manage.py的文件,通过下列指令运行Django后台. pyt ...

  8. Python教程:随机验证码生成和join 字符串

    函数:string.join() Python中有join()和os.path.join()两个函数,具体作用如下: join(): 连接字符串数组.将字符串.元组.列表中的元素以指定的字符(分隔符) ...

  9. List集合五种遍历方式

    一.使用Iterator接口遍历 二.普通for循环遍历 三.增强for循环遍历 四.List集合自带迭代器 五.Lambda(JDK8新增特性) //使用多态方式创建对象 List<Strin ...

  10. Java已知图片路径下载图片到本地

    public static void main(String[] args) { FileOutputStream fos = null; BufferedInputStream bis = null ...