JSで、base64にエンコードされた画像データをslack APIでuploadする方法

Question

base64にエンコードされた画像データをslack APIでuploadする方法がわかりません。
下に載せているコードを実行すると、no_file_dataとなります。
アドバイスよろしくお願いします。

$('#saveButton').click(function(){
    const canvas = document.getElementById('can');
    const img = canvas.toDataURL('image/png');
    const formData = new FormData();
    formData.append("file", img);
    const data = {
      token: SLACK_API_TOKEN,
      channel: '#general',
      username: 'sample'
    }
    $.ajax({
      type: 'POST',
      url: POST_URL,
      data: data,
      formData,
     
      success: function(data) {
        console.log(data)
      }
    });
  })

Answer 1

slack API は扱ったことがないのでわかりませんが、まずajaxに渡すオブジェクトの作り方がおかしいですね。

    const formData = new FormData();
    formData.append("file", img);
    formData.append('token', SLACK_API_TOKEN);
    formData.append('channel', '#general');
    formData.append('username', 'sample');

    $.ajax({
      type: 'POST',
      url: POST_URL,
      data: formData,
      // 以下略。
    });

Base64エンコードがいるというのは本当でしょうか？
https://api.slack.com/methods/files.upload

Answer 2

Blobに変換する必要があるのでは（未検証）。

【canvas - Canvasの中身を、formとしてPOSTしたい｜teratail】
https://teratail.com/questions/11714

【javascript - Convert Data URI to File then append to FormData - Stack Overflow】
https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata

【canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法 | while(isプログラマ)】
https://am-yu.net/2014/03/09/canvas-blob/

【Canvasで描画した画像を送信してサーバに保存する - Qiita】
https://qiita.com/0829/items/a8c98c8f53b2e821ac94

【canvas を用いて選択されたローカルファイルをリサイズし、ajaxで送信するまでのサンプル 選択されたのがイメージファイルでなければそのまま送信する · GitHub】
https://gist.github.com/haiiro-shimeji/5848850#file-file_uploader-js-L136