typora
Typora是大家寫博客、記筆記、寫文檔等日常使用場景下都會使用的一個MarkDown語法的軟件，對於熟悉markdown語法和喜歡markdown簡潔性的朋友來說，typora是不可或缺的工具。但是，對於圖片處理，我們需要圖牀去將我們的本地圖片（截圖、流程圖之類的）上傳到第三方的對象存儲上（當然自己的服務器也是可以的）。
本文基於一個typora在windows下的小插件windows下typora圖牀 來實現實時的粘貼圖片到typora即將你的圖片上傳到阿里雲OSS上，並且替換的實現過程，github上已經其實寫的比較明白了，但是還是想把自己接入的過程和踩得坑記錄一下。
對於typora的使用、阿里雲OSS的使用（我記得一年只要個位數的錢）、markdown語法等網上有很多介紹和例子，下面是幾個傳送門：
typora圖牀
怎麼發現的
如果你沒有圖牀，那麼在你寫博客的過程中如果要使用阿里雲圖片的外鏈，得是這樣的操作。
- 將圖片上傳到阿里雲OSS對象存儲上
- 複製該圖片的外鏈
- 將外鏈用markdown語法粘貼到正文中
這真的真的相當麻煩。(:з」∠)
所以圖牀就是用來解決這個問題，但是之前用的圖牀（之前用過chrome的一個圖牀插件）都是也只是省去了你登錄對象存儲在頁面上上傳的這一步，最後就還是要複製生成的url然後到typora的文章中。
這裏就在網上搜了下typora的圖牀，看看有沒有符合自己偷懶的想法的做法，一鍵截圖之後複製到typora中然後就可以了。
然後就是Google搜了下，發現第一條就是日常學（劃）習（水）的網站——知乎。
於是就點開之後看到了typora的這個插件，進而有了這個文章
手工教程
首先貼一下這個插件的地址：github
這個文檔中和知乎的回答差不多，我們可以直接來到使用這裏開始：
下載插件的代碼到本地，這裏不熟悉的github的同學可以直接點擊圖中的download zip即可。
解壓之後可以看到有這些文件，和github上的目錄對應
然後按照文檔上的教程手工替換（複製plugins目錄、替換window.html）到對應的typora安裝目錄下的resource\app目錄下。替換完成之後的目錄長這個樣子。
然後就是對裏面的代碼進行自己OSS的配置了。
打開plugins–>image–>upload.js文件（這裏可以直接用記事本打開js文件，當然程序員自動sublime或者vscode。），拉到底就可以看到文檔中說的init相關的代碼。
然後複製文檔上的阿里雲這段配置，把整個473行替換掉。
接下來就按照註釋（“//“後面的東西）來操作即可。
首先插件作者建議你添加一個子賬號來單獨操作你的OSS，這裏簡單理解下就是在你的阿里雲上你可以建立多個用戶組，而每個用戶組中可以建立多個子用戶，通過對用戶組或者用戶來設置權限達到一定操作。插件其實是用代碼去調用阿里雲提供的API來操作上傳圖片的，所以你肯定要在本地的typora的配置代碼裏填上一個關聯你OSS的賬號並且配置對應的權限才能成功上傳圖片；同時，出於安全考慮，你的這個賬號應該只對你的OSS有寫入和讀的操作權限，所以建議來個子賬號專門搞這個事情。
作者其實這裏寫的也很明白了，包括申請子用戶的地址：https://ram.console.aliyun.com/users
打開之後點擊新建用戶，即可看到讓你填用戶賬戶信息。
當然這裏也可以直接添加用戶組，然後在組下面添加用戶。
填寫你想要的登錄名稱（複雜點也沒關係，在後面配置一般是關鍵字搜索選擇的）、顯示名稱和勾選上編程訪問。這裏的編程訪問我們也可以清楚看到是通過assess信息來支持開發者調用API訪問的用戶。
點擊確定，這時要收一個驗證碼：
填寫完之後這步很關鍵，可以看到會在頁面上告知你一個accessKeyId和accessKeySercret，但是坑的地方是這個授權key的值只有在創建的這個頁面才能看到，之後就看不到了，所以這裏一定要進行復制或者保存這兩個值。可以看到頁面上也提供了對這兩個值的複製功能。
這時候就要給這個用戶去設置權限。剛創建的子用戶是沒有任何權限的，這裏你既然要對OSS進行上傳寫入的操作，肯定要給這個賬戶權限，可以看到在用戶界面有擬剛纔創建的子用戶，並且可以配置權限
這裏在權限搜索框內輸入OSS，就可以看到我們要配置的權限（管理OSS的權限），點擊確定即可。
到這裏，init代碼中需要的前三項就都有了。
還剩個bucketDomain，這裏作者其實也說的很明白了，在你的OSS概覽頁面上，會有對應的bucket域名，這裏挑選一個即可，我挑選的是外網訪問的這個bucket域名
其實文檔到這步也就沒有了，我就以爲是OK了，然後就很有自信的去保存了修改後的js文件去試了下。果然，不行_(:з」∠)_。
一直在提示我服務響應解析失敗，錯誤。之後又對了遍文檔發現也沒漏啥。最後還是選擇去看了upload代碼。
首先這個錯誤肯定是作者定義的，然後就在upload.js中看到了這個錯誤。
這裏可以看到其實是調用接口異常了，所以返回的這個錯誤，所以大概率是剛纔配置的問題，再往上翻纔看到原來除了文件底部的init方法之外，還要去配置下代碼中的setting信息，這裏稍微吐槽下爲啥文檔裏沒有寫（沒有，就是我前端不熟就沒看代碼，菜是原罪= =）。
在setting配置裏有這段代碼：
可以看到請求的域名和API訪問是從這裏解析的，所以你不配置這裏，默認會用作者寫死的jiebianjin去訪問接口，當然調不通了（因爲阿里雲上並沒有這個子用戶）。這裏還是剛纔的accessKey信息和bucket信息。這裏看到了設置了過期時間和上傳的大小限制，進而手工改了下大小限制，默認是512k，我這裏放大到了5M。
之後保存之後，又信心滿滿的去試了下，臥槽，居然還是報錯。然後又對了下文檔中的配置。
無奈打開了調試，typora其實就是個瀏覽器= =。windows下shift+f12是調試工具。這裏沒有把當時報錯的接口的截圖貼上，當時忘記截圖了，這裏是我在寫這篇博客的時候調試截圖的。通過一頓分析發現自己在配置BucketDomain的時候，忘記在最後加上一個反斜槓。這裏大家在配置的過程中也可以注意下。
給插件的建議
首先感謝插件作者 @Thobian 大佬寫了這個插件，真的在typora下很方便，應該以後會比較重度使用。這裏提幾個建議。
- 完善各個廠商對象存儲的配置教程，其實騰訊雲OSS我也用過，和阿里雲大同小異。
- 點擊再上傳這個功能可以加個彈窗之類的中間過程（不能省這個我get到，因爲可能失敗要重傳），在寫文過程中點擊到圖片會自動再上傳一次，OSS上會有比較多的重複文件，不好管理
- 接第二條，我在寫文過程中喜歡
ctrl+s保存，這個好像也會把我的圖片再重新上傳一次（不太確定），也會造成大量的相同文件。 - 性能上有時會卡頓，如果是阿里雲接口的鍋當我沒說哈_(:з」∠)_。
- 繼續開發更好的功能給大家用，會一如既往的支持的~