nodeサーバーにcanvas画像をアップロードしたい

Question

fablic.jsを使いながらcanvasに描画できるものを作っています。

こちらについて、描いたものをローカルにダウンロードすることはできました。

var downloadLink = document.getElementById('download_link');
    var filename = 'yourNewFile.png';

    var button = document.getElementById('download_button');
    button.addEventListener('click', function(){
        if (canvas.msToBlob) {
            var blob = canvas.msToBlob();
            window.navigator.msSaveBlob(blob, filename);
        } else {
            downloadLink.href = canvas.toDataURL('image/png');
            downloadLink.download = filename;
            downloadLink.click();
        }
    });

これを複数人数に使ってもらう必要があるため、nodeでサーバーを立てて動かし、canvasの画像をnodeサイドのuploadsフォルダに保存する仕組みを作りたいと思っています。

<form action="/upload" method="POST" enctype="multipart/form-data">
        <input type="file" name="file">
        <button type="submit">送信</button>
    </form>

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
      cb(null, file.originalname)
    }
  })
const upload = multer({ storage: storage })

app.post('/upload', upload.single('file'), function (req, res) {
    res.send(req.file.originalname + 'ファイルのアップロードが完了しました。');
  })

expressを使っています。
この方法が非常に簡単でよいのですが、イメージとしては上記二つを合体させたもの、つまり、

formを使わず、ボタンを押せばcanvasデータを画像に直しサーバーの特定のフォルダへ保存する（1動作で完結）

これを実現したいと思っています。
どのように記述すべきでしょうか？

アップロード参考サイト

ご回答を受けて質問させてください
こんな感じでしょうか？

<form action="" id="UP">
        <input type="file" id="up">
        <button>アップ</button>
    </form>

const UpBtn = document.getElementById('up');
    document.querySelector('#UP').addEventListener('submit',function(e){
        e.preventDefault();
        
        const formData = new FormData();
        formData.append('up', canvas.toDataURL('image/png'));
        console.log(formData);
        const param = {
            method: "POST",
            body: formData
        }
        fetch('/upload' , param)
            .then(function(res){
                return;
            })
            .then(function(){
                console.log('保存完了');
            })
            .then(function(error){
                console.log('エラーです');
            })
    })

fetchを使ったことがなかったので調べつつなんとなく書きましたが、エラーこそ出ないものの、この後サーバーサイドでどのように受け取るべきなのかがよくわかりません。もしよければ上記述がおおむね正しいのかどうかと、今後の方向を教えていただけるとありがたいです。

Answer 1

canvas.toBlob() でバイナリを得て、それを FormData に入れて、それをリクエストボディにして fetch() で /upload に POST しましょう。