こんにちは、財前です。
仕事をしていて、複数の画像ファイルを、フロントエンドのJavaScriptからサーバーサイドにPOST送信したい場面がありました。
ブラウザ側からJavaScriptのfetch関数を用いて、サーバー側へ画像送信を行います。
複数ファイルを1回のPOSTで送信する方法を忘れがちなので、メモに残します。
結論
フロントエンド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
https://developer.mozilla.org/en-US/docs/Web/API/FormData/appendBlob
objects is “blob”. The default filename forFile
objects is the file’s filename.
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上の回答です:

上記質問の回答を抜粋すると、以下の感じです:
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の第三引数のファイル名は、任意のようですね。
自分は日本語の情報が見つかりにくくてちょっと困ったので、この記事が、自分と同じ状況の方の助けになれば幸いです。
コメント