JavaScriptプログラムに関する各種メモ書き

javascript でブラウザから fetch を使ってmultipart/form-data でファイルアップロードを行う

● javascript でブラウザから fetch を使ってmultipart/form-data でファイルアップロードを行う

(xhr いわゆるajax)で通信します。

    const fileUpload = async () => {
      const url_1 = 'https://hogehoge.jpg'
      const url_1 = 'https://fugafuga.jpg'

      const file_1 = await urlToFile(url_1)
      const file_2 = await urlToFile(url_2)

      var formData = new FormData()

      formData.append("file001", file_1);
      formData.append("file002", file_2);

      const result = await fetch('/file-upload-backend-url', {
        method: 'POST',
        body: formData,
      }).then((response) => {
        return response.url;
      })

      return result;
    }

urlToFile メソッドはこちらを使用します
URL から File オブジェクトに変換する|プログラムメモ

実行

fileUpload()
No.2235
11/09 17:23

edit