Vue3 使用v-md-editor如何動態上傳圖片了

来源:https://www.cnblogs.com/shuisanya/archive/2022/08/06/16558056.html
-Advertisement-
Play Games

Vue3 使用v-md-editor如何動態上傳圖片了 前端代碼: <v-md-editor :autofocus="true" v-model="blog.content" height="510px" placeholder="請輸入內容" left-toolbar="undo redo cle ...


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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、前言 之前分享過一期關於DrawingVisual來繪製高性能曲線的博客,今天再分享一篇通過另一種方式來繪製高性能曲線的方法,也就是通過WriteableBitmap的方式;具體的一些細節這裡就不啰嗦了,同樣是局部繪製的思想,滾動條拖動到哪裡,就只繪製那一部分的曲線,直接貼代碼;(該程式在英特爾 ...
  • 規則,點擊投籃目標點,就會有一個球沿著相關拋物線,然後,判斷是否進入籃子里,其實就是一個矩形,直接是按照碰撞檢測來的,碰到就算進去了,對其增加了一個分數統計等功能。 ...
  • 1、await和.result/ .getwaiter() .getresult()的區別 await:Task.Run裡面的邏輯是新開的線程去執行的,await Task.Run後面邏輯都在新開的線程去執行。 private async void MainWindow_Loaded(object ...
  • 在智慧工廠領域,智慧城市領域,都需要對設備進行監控。比如工廠需要對周圍環境溫度、濕度、氣壓、電壓,燈的開關進行監控。這時候就需要物聯網平臺來進行管理。 在智慧工廠領域,寶馬集團通過英偉達的Omniverse平臺在電腦中創建數字孿生工廠,併在數字孿生工廠中進行改變生產線配置、工人動線、倉儲管理等實驗 ...
  • 前言 在進行某些爬蟲任務的時候,我們經常會遇到僅用Http協議難以攻破的情況,比如協議中帶有加密參數,破解需要花費大量時間,那這時候就會用Selenium去模擬瀏覽器進行頁面上的元素抓取 大多數情況下我們用Selenium只是爬取一下頁面上可見的元素信息或者做一些模擬人工的操作,但頁面可見元素的數據 ...
  • 需求背景: 近日,在安裝某軟體過程,發現在安裝過程需要輸入一些信息才能繼續下一步操作,在機器數量較少情況下,我們可以單台登錄上去完成安裝操作,但當機器數量超過一定時,如果再手動登錄操作,就會產生大量重覆性操作,既不能帶來有效學習能力提升,同時也會極大產生不確定性,引發工作效率下降,那麼如何自動化完成 ...
  • getIRC-Best IRC Client for mac是一款實用的IRC客戶端,它由各種獨立的 IRC 伺服器網路(或“網路”)組成,這些機器允許用戶連接到 IRC。 詳情:getIRC-Best IRC Client for mac(IRC客戶端) 簡單介紹 macOS 上的 Interne ...
  • 有人相愛,有人夜裡開車看海,我是leetcode第一題都做不出來 題目 給定一個整數數組 nums 和一個整數目標值 target,請你在該數組中找出 和為目標值 target 的那 兩個 整數,並返回它們的數組下標。 你可以假設每種輸入只會對應一個答案。但是,數組中同一個元素在答案里不能重覆出現。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...