markdown編輯器typora本地圖檔上傳到自己的伺服器

typora是windows平台下最受歡迎的markdown書寫工具和檢視工具，本篇文章将會介紹如何在typora平台使用java腳本程式自動上傳本地圖檔到自己的伺服器，進而讓markdown文章中的圖檔“一次書寫，處處可見”，免去總是需要轉換圖檔的麻煩。

一、從何處下手

1.typora設定

老版本的typora不支援圖檔上傳，是以首先要更新typora，然後打開檔案->偏好設定，點選圖像tab，可以看到如下選項

插入圖檔時選擇隻對本地圖檔執行上傳圖檔操作，上傳服務選擇Custom Command選項，就可以使用自定義上傳功能了，指令一欄裡填寫本地上傳腳本位址或者指令，點選“驗證圖檔上傳選項”，可以驗證上傳功能是否正常。

2.如何設計上傳腳本

上傳腳本可以使用任意語言實作，可惜我隻會java，是以這裡使用java實作（笑）。但是這裡有一個前提，那就是必須滿足typora對上傳圖檔的API要求，點選指令下面的“說明”按鈕，跳轉網頁https://support.typora.io/Upload-Image，這裡直接檢視custom那一欄，位址：https://support.typora.io/Upload-Image/#custom，就可以看到它對腳本實作的具體要求了：

翻譯一下，它的大概意思是，設計的腳本必須滿足幾個要求：

腳本圖檔輸入方法是這般形式： 腳本位址圖檔1絕對路徑圖檔2絕對路徑
腳本上傳完圖檔之後将圖檔的完整url列印到控制台，typora就會取倒數N行字元串作為圖檔的url位址（有幾張圖檔就取倒數幾行），并自動插入到markdown檔案中
可以用測試按鈕測試上傳功能。

整個過程非常簡單。

二、JAVA腳本實作

其實所謂的java腳本實作就是個main方法的事兒，這裡根據我們的需求，歸攏下需要的元件

最重要的肯定是http請求元件，這裡使用hutool工具包中的http請求工具，将會使用它實作擷取token、上傳圖檔功能
沒有spring不舒服，這裡要引入spring元件實作Bean的管理，不使用spring都不會寫代碼了，唉
序列化工具使用jackson
使用lombok簡化開發
使用slf4j+logback作為日志架構

撿着重要的說幾處吧

1.腳本中如何使用spring

大家都知道在springboot中使用spring非常簡單，脫離了springboot還有誰記得怎麼用spring嗎，哈哈，我也忘了，是以我百度了下

AnnotationConfigApplicationContext ctx = new AnnotationConfigApplicationContext();
ctx.register(Config.class);
ctx.refresh();

沒錯，就這麼簡單，之後就可以使用getBean擷取對象了。

UploadService service = ctx.getBean(DefaultUploadServiceImpl.class);

2.使用hutool上傳圖檔

首先，需要服務端的上傳圖檔接口，這個就不說了吧，算了還是說下吧，形式上就是這個樣子

@PostMapping("/upload")
@ResponseBody
public UploadResult upload(@RequestParam(value = "file", required = false) MultipartFile file,
                           HttpServletRequest request) throws IOException {
    ...
}

腳本要使用hutool調用這個接口上傳圖檔，上傳方法代碼如下

String body = HttpRequest
    .post(configProperties.getUploadUrl())
    .form("file", new File(filePath))
    .cookie(new HttpCookie(token.getKey(), token.getValue()))
    .execute()
    .body();
UploadResult uploadResult = objectMapper.readValue(body, UploadResult.class);

完美。

但是要注意，上傳圖檔的接口往往需要登入才可以調用，否則八成沒有權限。是以在調用該接口之前需要先調用登入接口擷取token，這裡就不贅述了。

3.注意事項

一定要将圖檔的完整路徑分行列印到控制台日志的最後幾行，這是滿足typora圖檔上傳腳本的硬性條件。

三、源代碼

https://gitee.com/kdyzm/typora-upload-plugin

該項目使用mavan管理依賴，使用指令

mvn clean package

打包之後，得到可執行jar包即可使用，需要注意的是，該項目是為開源部落格系統https://gitee.com/mtons/mblog量身打造的上傳腳本，如果不是使用這個部落格系統，就要自己修改源代碼了。

另外，歡迎關注我的部落格：https://blog.kdyzm.cn

四、效果示範

下面開始示範截圖之後複制到

typora

編輯器之後自動上傳截圖到遠端伺服器的過程：

可以看到，剪切闆中的圖檔一旦粘貼到markdown編輯器中，會調用腳本上傳圖檔并将傳回結果中的圖檔連結幫我們插入到編輯器中。

完美。