したかったんですよ。

FormDataをファイル別に生成して配列に放り込んだり、JSONでぶん投げたりしていたのですが、そんなことしなくてもFormDataにPOSTしたい数だけappendすればいいんですね。なんてアホなことを試していたんだ…

こんな感じ。なお、下記のコードはaxiosでAjaxしてます。

1
2
3
4
5
6
7
8
9
10
11
12
13
let files = new FormData();
files.append("a", file);
files.append("b", file);

axios
.post(url, files)
.then(response => {
// Do something
}
})
.catch(response => {
//Do something
});

上記で無事POSTできれば下記のようなRequest headers のペイロードが確認できます。

1
2
3
4
5
6
7
8
------WebKitFormBoundaryB5v2CQ2iW11RLhZ6
Content-Disposition: form-data; name="a"; filename="hoge.png"
Content-Type: image/png

------WebKitFormBoundaryB5v2CQ2iW11RLhZ6
Content-Disposition: form-data; name="b"; filename="foo.png"
Content-Type: image/png
------WebKitFormBoundaryB5v2CQ2iW11RLhZ6

ちなみに、FormDataをファイル別に生成して配列に放り込んだり、JSONでぶん投げたりたりしたばあいはRequest headers のペイロードは下記のようになにも入っていないものが表示されます。

1
2
3
4
5
6
7
[{}, {}]
0:{}
1:{}

{a: {}, b: {}}
a:{}
b:{}