Vue3?使用v-md-editor如何動(dòng)態(tài)上傳圖片的方法實(shí)現(xiàn)

更新時(shí)間：2022年08月07日 08:24:23 作者：水三丫

本文主要介紹了Vue3?使用v-md-editor如何動(dòng)態(tài)上傳圖片，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前端代碼：

<v-md-editor 
   :autofocus="true"
   v-model="blog.content" 
   height="510px"
   placeholder="請(qǐng)輸入內(nèi)容"
   left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | image | save "
   :disabled-menus="[]"
   @upload-image="handleUploadImage"
             >
</v-md-editor>

按我以上配置后，你把圖片插入或者從本地拖入，就可以激發(fā)upload-image綁定的函數(shù)，我這的名稱為：handleUploadImage

先看看這個(gè)圖片編輯時(shí)的圖片吧

大致流程圖

在setup看看這個(gè)函數(shù)（這是我寫好的）

files：表示你拖入的圖片文件，可以是多個(gè)，也可以是一個(gè)

insertImage：url就表示你需要回顯的地址；desc就是名稱；markdown語(yǔ)法：![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('請(qǐng)求失敗了',error.message)
            }
        )
    }
}

有沒(méi)有人和我一樣去看過(guò)這個(gè)file長(zhǎng)什么樣子

可以看到我上面發(fā)送了一個(gè)請(qǐng)求到后端，標(biāo)簽帶上了這個(gè)文件；就是下面這段代碼

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

后端的代碼：

請(qǐng)求的位置

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 = "圖片上傳失敗";

看看這個(gè)工具方法：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){
        // 通過(guò)uuid產(chǎn)生一個(gè)圖片名字
        String uuid = UUID.randomUUID().toString().trim().replaceAll("-","");
        String imgName = uuid + name;
        // 這是我隨機(jī)選擇了一文件夾 這里只是我個(gè)人愛(ài)好
        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;
    }
}

后端圖片的位置

測(cè)試：

順便附帶上我的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){
        // 擴(kuò)展插件
    }
})
 
const app = createApp(App)
app.use(VueMarkdownEditor)
app.use(VMdpreview)
app.mount('#app')

到此這篇關(guān)于Vue3 使用v-md-editor如何動(dòng)態(tài)上傳圖片的方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3動(dòng)態(tài)上傳圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: