Vue3 使用v-md-editor如何动态上传图片的方法实现_vue.js_

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) } ) } }

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 = "图片上传失败"; 

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; } }

// 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')