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

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編輯器中,會調用腳本上傳圖片並將返回結果中的圖片鏈接幫我們插入到編輯器中。

完美。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章