やりたいこと

下記のような構造のデータをブラウザからAPI（Spring Bootで作成）に送りたいと考えています。

fileList
┣file
┣charset
┣name
┗mode

やったこと＆調べたこと

下記のような実装をして動作確認したところ、APIから"400 Bad Request"が返ってきてしまいました。

調べてみると「FormDataにはオブジェクトを入れられない、どうしても入れたい場合はJSON文字列に変換し、API側でパースして利用する」といった記述が見つかりました。

JavaScriptで入れ子のFormDataをつくりたい
https://teratail.com/questions/96682

■追記
試しにfileListオブジェクトをJSON文字列に変換したところ、ファイル本体の情報が空になってしまいました…。

[{"file":{},"charset":"UTF-8","name":"sample.txt","mode":"add"},{"file":{},"charset":"UTF-8","name":"sample2.txt","mode":"add"}]

知りたい事

文字列や数値のみではなく、ファイルを入れ子にして送りたいのですが、
このような場合はどうしたら良いのでしょうか？
もし、ご存じの方がいらっしゃいましたらアドバイスをお願い致します。

フロント側

JavaScript
1    function uoloadFile() {
2      const files = $('#file1').prop('files');
3      if (files.length == 0) {
4        alert("ファイルが選択されていません");
5        return;
6      }
7
8      const fileList = [];
9      for (var i = 0; i < files.length; i++) {
10        fileList.push({
11          file: files[i],
12          charset: 'UTF-8',
13          name: files[i].name,
14          mode: "add",
15        });
16      }
17
18      const formData = new FormData();
19      formData.append("taskName", "送信テスト");
20      formData.append("fileList", fileList);
21      //formDataに値がセットされていることは確認済み
22      
23      const ajaxSettings = {
24        type: 'POST',
25        url: 'http://localhost:8080/file',
26        enctype: 'multipart/form-data',
27        timeout: 100000,
28        contentType: false,
29        data: formData,
30        processData: false,
31        cache: false,
32      }
33
34      $.ajax(ajaxSettings)
35        .done(function(data, status, xhr) {
36          alert("成功!");
37        })
38        .fail(function(jqXHR, textStatus, errorThrown) {
39          alert("失敗…");
40          console.log(jqXHR.responseText);
41        });
42    }

API側

コントローラクラス

Java
1@RestController
2@RequestMapping("/file")
3public class FileUploadController {
4
5	@PostMapping
6	public void uploadMultiFile(@ModelAttribute FileUploadRequest request) {
7		for (UploadFile file : request.getFileList()) {
8			//値が取れているか確認 → そもそも、このメソッドが呼ばれない
9			System.out.println(file.getName());
10			System.out.println(file.Charset());
11		}
12	}
13}

リクエストパラメータ用クラス

Java
1@Data
2public class FileUploadRequest {
3
4	private String taskName;
5
6	private List<UploadFile> fileList;
7}
8

Java
1@Data
2public class UploadFile {
3
4	private MultipartFile file;
5
6	private String charset;
7
8	private String name;
9	
10	private String mode;
11
12}

m.ts10806

2021/05/21 08:54

JSONは試したのでしょうか

行動規範の内容に同意します

回答3件

自己解決

FormDataを下記のように設定したところ、API側で想定通りに受け取れることが確認できました。
（API側のコードは変更なし）

Javascript
1const formData = new FormData();
2formData.append("taskName", "送信テスト");
3for (var i = 0; i < files.length; i++) {
4  formData.append("fileList[" + i + "].file", files[i]);
5  formData.append("fileList[" + i + "].charset", "UTF-8");
6  formData.append("fileList[" + i + "].name", files[i].name);
7  formData.append("fileList[" + i + "].mode", "add");
8}