1. 程式人生 > 實用技巧 >Typora+PicGo+阿里雲OSS實現圖片上傳功能

Typora+PicGo+阿里雲OSS實現圖片上傳功能

煩惱

Typora是最好用的markdown語法的工具之一;平時做筆記都是使用這個工具,免費,簡潔好用,用上之後就愛上了。但是它預設圖片是放在本地的。為了用好這個工具,也是經歷了一打怪之旅。

開始不做任何設定使用,圖片都儲存在預設資料夾。為了保證筆記質量,我的截圖圖片沒有做任何壓縮,檔案比較大,這樣的後果是預設資料夾下的圖片數量加大,又不敢刪除,維護起來特別困難;

於是學了前輩們設定相對路徑的做法,把筆記和圖片檔案儲存到一個專用來存放筆記的檔案當中,這樣維護成本大大降低(開始使用的同學可以嘗試百度修改)。之後問題又來了,Typora中的圖片路徑都是本地的。分享筆記或者上傳到有道雲都會導致圖片找不到,解決辦法是,將筆記內容匯出為PDF檔案再分享和上傳。PDF不可編輯用著不爽。

image-20201010135354310

我平時經營我自己的公眾號,寫文章一直找不到合適的工具可以實現各個平臺文章的整合維護(實現一次編輯,到處釋出!)於是瞭解到markdownNice外掛,這是一個真香的編輯器。但是我以前的筆記都是用了Typora儲存的都是本地的圖片路徑,複製md原始碼貼上,尷尬的是圖片我得一個一個進行編輯。不爽!(因為防盜鏈的原因,複製公眾平臺中寫好的文章,公眾號中的圖片也是不能訪問到的)能不能把圖片放到雲端,md原始碼到哪裡都能通過圖片地址訪問到?

再次想有沒有什麼更騷的操作,將圖片上傳到雲端,這樣在任何地方訪問都是美滋滋了呀!有問題,找百度。一看有人已經實現,有戲!於是開始在上班摸魚時間偷偷摸索起來…

準備工作

Typora方面的準備

在Typora偏好設定中,影象可以實現上傳,再看上傳服務設定,點開看了看,各種方式都有介紹,但是都是Typora設定的一些介紹。話不多說,開幹!

  • 設定上傳圖片;
  • 下面的配置選項介紹再瞭解更多中有更詳細的介紹,這裡我都選了;

image-20201010105417031

  • 上傳服務中選擇PicGo(app);

    這裡其他選項都是和命令有關的操作,我想app才是最友好的操作,又一百度,果然網上的前輩都是這麼幹的!

image-20201010105618561

  • 下載PicGO;

    這裡有連結可以直接跳到下載頁,點選即可;

    image-20201010110401352

    PicGo的首頁:當然是看看這個工具的介紹,然後點選買南非下載啦!

    image-20201010110606347

    我的是Windows的電腦,所以選擇.exe字尾的檔案下載;

    image-20201010110746462

    接下來就是完成之後的傻瓜式安裝,啟動;

  • 填上PicGo的路徑;

    image-20201010111121115

PicGo方面的準備

PicGo可以支援多個平臺的圖床;嘗試過用gitee外掛的方式做圖床,結果失敗了,需要安裝Nodejs麻煩,只是下載安裝Node就花費一晚上(訪問外網下載卡到爆)。以前專案儲存圖片使用過阿里雲OSS,大平臺,不免費,但是也不貴,相比對XX視訊的VIP來說已經很便宜了。況且要學習,就要原理娛樂性的APP;於是決定用阿里雲OSS物件儲存做PicGo的預設圖床;

image-20201010111612283

圖床設定中需要的引數,需要從自己的阿里雲OSS賬戶中來;

image-20201010112350925

接下來,解決這些引數的來源問題,就是搞一搞阿里雲OSS;

阿里雲OSS方面的準備

註冊一個阿里雲賬戶登入這些就不說了,咱們植入重點:

  • 進入官網——註冊——登入

  • 再搜尋欄中輸入OSS搜尋;

    image-20201010112934848

  • 選擇購買

    地域選擇離自己位置比較近的地區即可,其他預設選項,費用不貴,還有一些按流量計費的收費標準。可自行了解。

    image-20201010113041519

    image-20201010113258808

  • 主使用者許可權過高,只是作為圖床就沒有必要這麼高的許可權,我們通過建立子使用者的方式來管理圖床;

    點選頭像——>訪問控制

    image-20201010113526194

  • 建立使用者,訪問方式選擇程式設計訪問,登入名稱和顯示名稱自己設定;image-20201010113644144

使用者建立完成後,會生成Access ID和Access secret,可以點選複製儲存起來,後面做引數使用。

image-20201010115123984

  • 建立之後,對子使用者新增許可權:

    image-20201010114013703

    只新增AliyunOSSFullAccess的許可權即可;

    image-20201010114156314

  • 建立圖片儲存空間Bucket

    image-20201010114805787

    這裡注意,許可權需要是公共讀

    image-20201010114603279

  • 建立完成之後,Bucket列表中,可以看到訪問域名,這裡也是作為引數,我們需要記住:

    image-20201010115415564

  • 接下來就是把PicGo中的引數填好:

    image-20201010112350925

測試

再PicGo上傳圖片測試:

image-20201010115614311

提示上傳成功:

image-20201010115715093

還可以去OSS中看看圖片是否已經存在;

再試試Typora能不能上傳成功:

image-20201010115837873

至此,整個過程就完美結束了!

歡迎大家關注我的公眾號,其中有我釋出的學習筆記和學習資料。一起共同進步!
在這裡插入圖片描述