vscode 粘貼圖片自動上傳到多吉圖床

該文章的解決方法有些問題，推薦使用更完美的方法。

最近有聽說一個限時免費的多吉圖床，支持大陸 CDN 和高性能的實時裁剪功能，我也給作者發了一封郵件嘗試申請了一下，大概過了兩三天通過了。

申請到圖床後，當然是配置圖片自動上傳了。前段時間一直使用 typora 寫 md，可以很方便地使用 “自定義圖片上傳命令” 對接 picgo-core 完成圖片上傳，但現在我更多會使用 vscode 來寫博客，因此需求變為了 vscode 粘貼圖片自動上傳到多吉圖床 ，本文記錄了我的探索過程和解決方法。

探索#

就我自己了解的，picgo-core 基於插件化設計，通過手動編寫插件應該很容易完成自定義上傳的需求，難點在 vscode 粘貼圖片和 picgo 上傳命令的對接上。

但很遺憾，經過一圈查找後，我沒有找到 vscode 粘貼圖片自定義命令的 hook ，當前 picgo 的 vscode 擴展也只支持 picgo-core 官方支持的八種圖床，並不能支持 picgo-core 的自定義插件。

the plugin feature of PicGo-Core is working in progress.

解決#

所幸，在查找過程中，我發現了另一款 vscode 擴展： vsc-markdown-image，這款插件支持自定義上傳方法，只需要編寫一個異步 JavaScript 函數，實現上傳並返回圖片鏈接即可。

官方文檔給出的模板如下：

const path = require('path');
module.exports = async function(filePath, savePath, markdownPath) {
    // Return a picture access link
    return path.relative(path.dirname(markdownPath), filePath);
}

參數說明：

filePath => 臨時圖片文件的路徑
savePath => 根據設置生成的圖片文件名
markdownPath => 當前 .md 文件的路徑

模板代碼是直接返回了圖片相對於當前 md 文件的相對路徑。

使用自己淺薄的 js 知識，我寫了一個簡單的上傳函數：

const path = require('path');
const got = require('got')
const FormData = require('form-data')
const fs = require('fs')

module.exports = async function (filePath, savePath, markdownPath) {
    // 在此處填寫你申請到的token
    const token = 'your token'
    const postURL = `https://www.dogedoge.com/tools/upload/${token}`
    const form = new FormData()
    form.append('file', fs.createReadStream(filePath))
    try {
        const resp = await got.post(postURL, {
            body: form
        })
        let response = JSON.parse(resp.body)
        return response.data.o_url
    } catch (error) {
        console.error(error)
        return path.relative(path.dirname(markdownPath), filePath);
    }
}

經過測試，可以正常上傳。

使用#

我已經將代碼上傳到 github 倉庫，使用方法如下：

# 下載代碼
git clone https://github.com/amtoaer/vsc-markdown-image-dogedoge
# 切換到目錄
cd vsc-markdown-image-dogedoge
# 安裝依賴可選兩種方法：
# 1. 使用yarn安裝依賴
yarn
# 2. 使用npm安裝依賴
npm install

接著需要在 vscode 內安裝 Markdown Image 擴展，對擴展設置如下：

Markdown-image > Base: Upload Method 調整為自定義
Markdown-image.DIY: Path 填寫 upload.js 文件的絕對路徑

圖 1

至此配置成功，需要上傳圖片時只需要右鍵編輯區域並點擊粘貼圖片選項，或者使用快捷鍵 ALT + SHIFT + V 即可。