DiscordのWebhookを使ってNode.jsから画像をPOSTする

以外とまとまって無かったのでメモ。

DiscordのAPIを使うとクライアントキーとか発生して面倒なのでWebhookの仕組みだけ使って画像を送ってみます。Gyazoとかに上げつつURLをシェアするパターンもありそうですが、今回は直アップロードとなります。

テキストを送る場合

Fetchでテキストを送るときはこんな感じです。

Fetchのmultipart/form-dataで画像をポストする

こちらのサンプルを見るとmultipart/form-dataを使ってポストしてました。

BloB指定になる模様なのでNode.jsからやる場合はfsモジュールで読み込みます。

screenshot.pngという名前のファイルが同じ場所にあるイメージです。

'use strict'

import fs from 'fs';

const URL = `WebhookURL`;

const main = async () => {
    try {
        const filePath = `screenshot.png`;
        const file = fs.readFileSync(filePath)
        const formData = new FormData()
        formData.append('file', new Blob([file], { type: 'image/png' }), 'file.png')

        const response = await fetch(URL, {
            method: 'POST',
            body: formData
        });
    
        const responseData = await response.json();
        console.log(response.status);
        console.log(responseData);
    } catch (error) {
        console.log(error);
    }

}

main();

実行するとこんな感じ。サーバー不要でありがたいですね。

おまけ テキストも同時に送る

"payload_json"を指定してあげればテキストも一緒に送信できます。

'use strict'

import fs from 'fs';

const URL = `WebhookURL`;

//テキストも送信
const payload = {
    username: 'n0bisuke BOT',
    content: 'Node.js Fetch APIからポスト'
};

const main = async () => {
    try {
        const filePath = `screenshot.png`;
        const file = fs.readFileSync(filePath)
        const formData = new FormData()
        formData.append('file', new Blob([file], { type: 'image/png' }), 'file.png')
        formData.append("payload_json", JSON.stringify(payload)); //テキストも送信

        const response = await fetch(URL, {
            method: 'POST',
            body: formData
        });
    
        const responseData = await response.json();
        console.log(response.status);
        console.log(responseData);
    } catch (error) {
        console.log(error);
    }

}

main();

参考