Vue3 使用v-md-editor如何动态上传图片了
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语法:
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如何动态上传图片了的更多相关文章
- PHPCMS调用form类编辑器editor函数动态上传图片附件
http://w3note.com/web/49.html phpcms v9的系统类库有一个表单类,它封装了表单的一些组件,如编辑器.图片上传.时间选择器.模板选 择器等,更详细请参考form.cl ...
- Markdown编辑器editor.md的使用---markdown上传图片
http://kindeditor.org/ 确定下有没有查找替换功能 http://pandao.github.io/editor.md/ http://pandao.github.io/edito ...
- kendo ui 富文本编辑控件 Editor 实现本地上传图片,并显示
富文本编辑的组件有很多,大名鼎鼎的KENDO UI中自然也有,但是默认功能中,只能包含网络图片, 而如果要实现本地上传图片,KENDO UI也提供了相应的功能,但必须实现KENDO规定的多个接口, 而 ...
- 基于SpringBoot从零构建博客网站 - 集成editor.md开发发布文章功能
发布文章功能里面最重要的就是需要集成富文本编辑器,目前富文本编辑器有很多,例如ueditor,CKEditor.editor.md等.这里守望博客里面是集成的editor.md,因为editor.md ...
- 从并发处理谈PHP进程间通信(二)System V IPC
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...
- Confd+Consul 动态生成配置文件
一.Consul安装和配置 1.consul是什么? consul是HashiCorp公司推出的一款工具,主要用于实现分布式系统的服务发现与配置,它提供了以下几个关键特性: 服务发现:Consul客户 ...
- Unity3D移动平台动态读取外部文件全解析
前言: 一直有个想法,就是把工作中遇到的坑通过自己的深挖,总结成一套相同问题的解决方案供各位同行拍砖探讨.眼瞅着2015年第一个工作日就要来到了,小匹夫也休息的差不多了,寻思着也该写点东西活动活动大脑 ...
- atom编辑markdown之上传图片
01atom编辑markdown之上传图片 :first-child { margin-top: 0px; } .markdown-preview:not([data-use-github-style ...
- (转)Unity3D移动平台动态读取外部文件全解析
Unity3D移动平台动态读取外部文件全解析 c#语言规范 阅读目录 前言: 假如我想在editor里动态读取文件 移动平台的资源路径问题 移动平台读取外部文件的方法 补充: 回到目录 前言: 一直有 ...
随机推荐
- 204. Count Primes - LeetCode
Queston 204. Count Primes Solution 题目大意:给一个数,求小于这个数的素数的个数 思路:初始化一个boolean数组,初始设置为true,先遍历将2的倍数设置为fal ...
- 使用 Flutter 与 Firebase 制作 I/O 弹球游戏
文/ Very Good Ventures 团队,5 月 11 日发表于 Flutter 官方博客 为了今年的 Google I/O 大会,Flutter 团队使用 Flutter 以及 Fireba ...
- Vue项目中的接口进阶使用
创建services文件夹 1.文件夹apis.index.request的三个文件. 2.apis文件放接口 export const apis = { checkDeviceNo: '/api/c ...
- GoF的23种设计模式的功能
GoF的23种设计模式的功能 前面说明了 GoF 的 23 种设计模式的分类,现在对各个模式的功能进行介绍. 单例(Singleton)模式:某个类只能生成一个实例,该类提供了一个全局访问点供外部获取 ...
- HDD线上沙龙·创新开发专场:多元服务融合,助力应用创新开发
5月24日,由华为开发者联盟主办的HUAWEI Developer Day(华为开发者日,简称HDD)线上沙龙·创新开发专场在华为开发者学堂及各大直播平台与广大开发者见面.直播内容主要聚焦Harmon ...
- [补漏]shift&算法
题意:regular number 给你一个字符串,要你输出所有(每位都符合要求的)子串,输入时告诉你每位只能填的数集. 思路: bitsetc[x]存每个数字可以存在的字符串位的二进制集合.(如3可 ...
- CabloyJS部署了一套演示站点
为了方便大家快速体验和了解CabloyJS的风格和特性,全新部署了一套演示站点.对于初次接触CabloyJS的开发者,不用下载新建项目,就可以直接体验CabloyJS了 在线演示 场景 链接/二维码 ...
- sklearn练习1 回归
from sklearn.svm import SVR from sklearn.pipeline import make_pipeline from sklearn.preprocessing im ...
- 浅谈倍增法求解LCA
Luogu P3379 最近公共祖先 原题展现 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入格式 第一行包含三个正整数 \(N,M,S\),分别表示树的结点个数.询问 ...
- 『忘了再学』Shell基础 — 31、字符处理相关命令
目录 1.排序命令sort (1)sort命令介绍 (2)练习 2.取消重复行命令uniq 3.统计命令wc 1.排序命令sort (1)sort命令介绍 sort命令可针对文本文件的内容,以行为单位 ...