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语法：

![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')