【JavaScript】fetch関数で複数の画像ファイルを配列としてPOST送信する方法（複数ファイルをサーバーにアップロード）

こんにちは、財前です。

仕事をしていて、複数の画像ファイルを、フロントエンドのJavaScriptからサーバーサイドにPOST送信したい場面がありました。

ブラウザ側からJavaScriptのfetch関数を用いて、サーバー側へ画像送信を行います。

複数ファイルを１回のPOSTで送信する方法を忘れがちなので、メモに残します。

結論
1. フロントエンドJavaScript側
2. サーバーサイド（ASP.NET Coreの例）
参考情報

結論

フロントエンドJavaScript側

以下のように、FormDataに同名の要素をappendする：

const formData = new FormData();
formData.append("files", file1, "1.png");
formData.append("files", file2, "2.jpg");

const res = await fetch(
    "/api/Articles/UploadMedia",
    {
        method: "POST",
        body: formData,
    }
);

上記の”files”のように、同じ名前の要素を、FormDataに複数回appendします。

appendの第二引数の「file1」や「file2」というのが、アプロードしたいファイルオブジェクトです。

MDN Web Docsによると、appendの第三引数のファイル名は、特になくても良いようです：

The default filename for Blob objects is “blob”. The default filename for File objects is the file’s filename.
https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

Blobオブジェクトの場合は”blob”が、Fileオブジェクトの場合はそのファイルのファイル名が、デフォルトで設定されるようです。

サーバーサイド（ASP.NET Coreの例）

サーバーサイドの受け取り側は以下のようなイメージです。

C#のASP.NET Coreを用いた場合の、Controllerのメソッドの例：

[HttpPost("[action]")]
public async Task<Result> UploadMedia(IFormFile[] files)
{
    // 処理
}

サーバーサイドの受け取り側は、上記のような書き方にすると上手く受け取れました。

ただ、この例はASP.NET Coreというフレームワークの例なので、詳細の書き方は、ご利用されているサーバーサイド言語やフレームワークによると思います。

お使いのフレームワークにも、配列でForm要素を受け取る方法があるかと思うので、受け取り方は適宜ググって頂けると良いのではないかと思います。

参考情報

日本語で良い感じの情報が見つかりにくかったため、この記事を書きました。

自分が参考にしたのは、以下のstack overflow上の回答です：

How do I upload a file with the JS fetch API?

I am still trying to wrap my head around it. I can have the user select the file (or even multiple) with the file input: <form> <div> <la...

上記質問の回答を抜粋すると、以下の感じです：

If you want multiple files, you can use this
—
var input = document.querySelector(‘input[type=”file”]’)
var data = new FormData()
for (const file of input.files) {
data.append(‘files’,file,file.name)
}
fetch(‘/avatars’, {
method: ‘POST’,
body: data
})
—
Note that explicitly passing file.name as the filename isn’t necessary; per the MDN docs on FormData.append, the default name for File objects already is the file’s filename.
https://stackoverflow.com/questions/36067767/how-do-i-upload-a-file-with-the-js-fetch-api

appendの第三引数のファイル名は、任意のようですね。

自分は日本語の情報が見つかりにくくてちょっと困ったので、この記事が、自分と同じ状況の方の助けになれば幸いです。