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

狂盜一枝梅發表於2021-02-03
地圖伺服器

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

一、從何處下手

1.typora設定

老版本的typora不支援圖片上傳，所以首先要升級typora，然後開啟 檔案->偏好設定，點選影像tab，可以看到如下選項

image-20210203175616041

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

2.如何設計上傳指令碼

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

image-20210203180341559

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

  1. 指令碼圖片輸入方法是這般形式：指令碼地址 圖片1絕對路徑 圖片2絕對路徑
  2. 指令碼上傳完圖片之後將圖片的完整url列印到控制檯，typora就會取倒數N行字串作為圖片的url地址（有幾張圖片就取倒數幾行），並自動插入到markdown檔案中
  3. 可以用測試按鈕測試上傳功能。

整個過程非常簡單。

二、JAVA指令碼實現

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

  1. 最重要的肯定是http請求元件，這裡使用hutool工具包中的http請求工具，將會使用它實現獲取token、上傳圖片功能
  2. 沒有spring不舒服，這裡要引入spring元件實現Bean的管理，不使用spring都不會寫程式碼了，唉
  3. 序列化工具使用jackson
  4. 使用lombok簡化開發
  5. 使用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編輯器之後自動上傳截圖到遠端伺服器的過程：

typora截圖上傳圖片

可以看到，剪下板中的圖片一旦貼上到markdown編輯器中，會呼叫指令碼上傳圖片並將返回結果中的圖片連結幫我們插入到編輯器中。

完美。

相關文章