vscode 画像を貼り付けると、自動的にDogeImgにアップロードされます。

この記事の解決策には問題があります。より完璧な方法をおすすめします。

最近、限定無料の多吉図床について聞いたことがあります。この図床は、中国本土の CDN と高性能のリアルタイムクロップ機能をサポートしており、私も作者にメールを送って申請してみました。2〜3 日後に承認されました。

図床を申請した後は、もちろん画像の自動アップロードを設定します。以前は常に typora を使用して md を書いていましたが、「カスタム画像アップロードコマンド」を使用して picgo-core と連携して画像をアップロードすることが非常に簡単でした。しかし、最近は主に vscode を使用してブログを書くことが多くなったため、要件は「vscode で画像を貼り付けて自動的に多吉図床にアップロードする」に変わりました。この記事では、私の探求過程と解決策を記録しています。

探求#

私の知識に基づいて言えば、picgo-core はプラグインベースの設計であり、プラグインを手動で作成すればカスタムアップロードの要件を簡単に満たすことができるはずです。難しいのは、vscode で画像を貼り付けて picgo のアップロードコマンドと連携することです。

しかし、調査を行った結果、私は vscode でカスタム画像コマンドのフックを見つけることができませんでした。現在のPicGo の vscode 拡張機能は、PicGo-Core が公式にサポートしている 8 つの図床のみをサポートしており、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 ファイルのパス

テンプレートコードでは、画像の相対パスを直接返しています。

私の限られた JavaScript の知識を活用して、簡単なアップロード関数を作成しました：

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

module.exports = async function (filePath, savePath, markdownPath) {
    // ここに申請したトークンを入力します
    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
# 依存関係をインストールする方法は2つあります：
# 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を使用します。