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

typora是windows平臺下最受歡迎的markdown書寫工具和查看工具，本篇文章將會介紹如何在typora平臺使用java腳本程序自動上傳本地圖片到本身的服務器，從而讓markdown文章中的圖片「一次書寫，到處可見」，免去老是須要轉換圖片的麻煩。

1、從何處下手

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. 腳本圖片輸入方法是這般形式：腳本地址 圖片1絕對路徑 圖片2絕對路徑
2. 腳本上傳完圖片以後將圖片的完整url打印到控制檯，typora就會取倒數N行字符串做爲圖片的url地址（有幾張圖片就取倒數幾行），並自動插入到markdown文件中
3. 能夠用測試按鈕測試上傳功能。

整個過程很是簡單。

2、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圖片上傳腳本的硬性條件。

3、源代碼

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

該項目使用mavan管理依賴，使用命令mvn clean package打包以後，獲得可執行jar包便可使用，須要注意的是，該項目是爲開源博客系統https://gitee.com/mtons/mblog量身打造的上傳腳本，若是不是使用這個博客系統，就要本身修改源代碼了。

另外，歡迎關注個人博客：https://blog.kdyzm.cn

4、效果演示

下面開始演示截圖以後複製到typora編輯器以後自動上傳截圖到遠端服務器的過程：

能夠看到，剪切板中的圖片一旦粘貼到markdown編輯器中，會調用腳本上傳圖片並將返回結果中的圖片連接幫咱們插入到編輯器中。

完美。