前言
是我用過最爽的文本編輯器了。但是有一點很讓人難受，就是在寫文章的時候，粘貼上的圖片是本地路徑。這就導致在復制文章到各大博客平臺時發表，圖片無法顯示。然后需要各種辦法去處理文章中的圖片，不僅要手動上傳到某個圖床，然后再回來編輯文章，總之就是令人非常抓狂。
雖然在>偏好設置>圖像>上傳服務中，有PicGo的選項。我折騰過一次，按照官方的教程弄了很長時間還是失敗了，因此被勸退。
一次偶然，我發現了上傳服務中的 可以執行node命令，便使用剛學了兩天的node.js寫了一個腳本，完整代碼附在本文最后。
先說思路：創建一個文件，每次粘貼圖片后使用node.js運行這個js文件。在這個js文件中，我們將粘貼的圖片放到一個本地git倉庫中。然后將其推送到遠程git倉庫，拿到遠程倉庫中的圖片地址放回文章中，這樣就大功造成。
無需安裝下載額外的各種插件，軟件等。僅僅使用十余行js代碼便可完成。如果你使用的是其他編程語言，那么我相信你在看完這篇文章后也會有自己的思路。
實現過程
最重要的一點，遠程的倉庫必須要設置為公開狀態，否則拿到的圖片鏈接無法訪問。為什么我會先說這一點，因為我最開始的時候選擇的gitee（碼云）平臺，完成之后才發現gitee不讓我們這樣使用，如下圖。
所以我最后選擇了平臺，背靠CSDN，不是不知名的小平臺，可以放心使用。現在這篇文章中你看到的圖片就是存放在這個平臺。（平臺感興趣的也可以去嘗試一下，方法也是一樣的）。
前期準備
1.創建一個文件，這就是我們的腳本了。文件路徑隨意，命名也沒有要求。但是需要記下你的文件在你電腦上的絕對路徑，比如你在D盤下創建，路徑就是D:\文件名.js。為了方便文件管理，我是放在的安裝目錄下，命名為.js。絕對路徑是D:\\\.js創建好后就可以打開>偏好設置>圖像，按照下圖的方式配置:
這里有一個要知道的點，根據官網的配置說明，只要我們輸出的代碼最后幾行中，含有“”開頭的url，就會識別到并且替換掉我們粘貼的圖片（這里就是將圖片本地路徑替換為網絡路徑）。
簡單來說，我們只要在本地倉庫推送到git平臺后，.log()一下遠程倉庫的地址+文件名就行了。
現在開始編寫.js文件
第一步：獲取本地圖片的路徑和文件名
在運行我們的文件的時候，實際上的命令為：
node imgServe.js "C:\\xxx\\xxx\\xxx\\圖片名稱.png"
所以，只要我們使用以下代碼，就能夠獲取到本地圖片的路徑和名稱
const argv = process.argv;// 由node.js提供，直接使用就好
?
?
const localImageUrl = argv[2]
/* argv是一個數組
數組的第一項是node.js的路徑
數組的第二項是imgServe.js的路徑
數組的數組的第三項就是我們所需要的，粘貼的圖片的本地路徑*/
?
?
const fileName= localImageUrl.split("\\")[localImageUrl.length-1]
/* 將路徑按照“\\”切分為數組，數組的最后一項就是我們圖片的文件名 */
第二步：復制圖片到image文件夾（本地倉庫）
為什么要使用復制而不是移動，因為在git push完成之前，使用的還是圖片的本地路徑。如果直接移動，那么效果就是，粘貼圖片后js圖片上傳好用的插件，圖片瞬間消失（被移動了，本地路徑找不到文件），一會后又顯示（push完成，使用了網絡路徑）。這樣使用體驗就不太好。
當然，如果你還是比較在意電腦的存儲空間，那么在push完成后使用一條命令將其刪除即可。
CMD復制文件到指定文件夾指令我想大家都知道：
copy [要移動的文件] [指定的文件夾]
但是如何在.js中使用這個指令呢?
答案是：node.js的模塊中的exec方法。
一行命令即可使用：
const { exec } = require("child_process");
使用exec我們就可以執行復制CMD的指令了，后面的git add / git / git push也同樣是靠這個來執行。
現在就來將粘貼后的圖片復制到本地倉庫（image文件夾）下：
exec(`copy ${localImageUrl} D:\\software\\Typora\\image`)
第三步：推送本地倉庫到遠程倉庫
注意：這一步看似簡單，但是有兩個大坑。
第一個坑：按照平時的習慣，我們自然是進入到image文件夾，執行推送。但是我失敗多次后才發現，以下的命名走不通：
exec(`cd D:\\software\\Typora\\image`)
這就意味著無法進入到image文件夾，我們只能在image文件夾外進行推送操作，其實很簡單，只要在git命令中加上image文件夾的絕對路徑就行了：
exec(`git -C D:\\software\\Typora\\image add .`);
exec(`git -C D:\\software\\Typora\\image commit -m "新增圖片"`);
exec(`git -C D:\\software\\Typora\\image push`);
你是不是以為這樣就大功造成了，并沒有。
第二個坑： 以上的三條命令是同步執行的，也就是說，可能我們還沒add或完成，就已經push了，結果可想而知。
解決的方法很簡單，exec能接收一個回調函數，我們在里面執行下一步的命令，順序就不會錯亂了
exec(`git -C D:\\software\\Typora\\image add .`,() => {
exec(`git -C D:\\software\\Typora\\image commit -m "新增圖片"`, () => {
exec(`git -C D:\\software\\Typora\\image push`);
});
});
這樣js圖片上傳好用的插件，大功造成。
第四步：拿到遠程git倉庫中的圖片路徑
由于遠程倉庫的地址是固定的，你可以隨便在里面放置一張圖片。然后點擊圖片查看到圖片的大圖，復制瀏覽器上方的url（或點擊右鍵復制圖片地址），去掉文件名之后就得到我們需要的地址了。
注意一定要點開圖片得到的才是圖片地址，不點開得到的是倉庫的頁面地址，拿過來無法展示圖片
我拿到的地址是圖片名稱.png
前面的路徑是固定的，我們只需要改變文件名就行了。
現在，我們在push操作完成之后輸出這個路徑+圖片名就行了：
exec(`git -C D:\\software\\Typora\\image push`, () => {
console.log(`https://gitcode.net/wjunxxx/typora-image-repository/-/blob/master/${fileName}`)
});
這樣我們的腳本就正式完成了。
完整代碼
const argv = process.argv;
const { exec } = require("child_process");
?
const localImageUrl = argv[2]
const fileName= localImageUrl.split("\\")[localImageUrl.length-1]
?
exec(`copy ${localImageUrl} D:\\software\\Typora\\image`, () => {
exec(`git -C D:\\software\\Typora\\image add .`,() => {
exec(`git -C D:\\software\\Typora\\image commit -m "新增圖片"`, () => {
exec(`git -C D:\\software\\Typora\\image push`, () => {
console.log(`https://gitcode.net/wjunxxx/typora-image-repository/-/blob/master/${fileName}`)
});
});
});
})
總結
以上的方法已經足夠正常使用了，如果你想更優雅一點，可以獲取一下當前的日期，使用其為文件夾命名。這樣就能將你倉庫中的圖片按照日期歸檔了，想要查找或修改某一張圖片的時候就能有更好的體驗啦！
最后
為大家準備了一個前端資料包。包含54本，2.57G的前端相關電子書，《前端面試寶典（附答案和解析）》，難點、重點知識視頻教程（全套）。
有需要的小伙伴，可以點擊下方卡片領取，無償分享