AxiosからMultiPartFileをSpringBootで受け取る

シンプルなミニマムコードが見つからなかったので備忘録に。。
初めての記事なのでなにか問題があれば補足よろしくお願いします。

1ファイルを受け取る場合

フロントエンド

sample.html

<input type="file" id="in_file">
<button onclick="onclick()">post</button>

sannple.js

function onclick() {
    // input file から指定したファイルを取り出し。
    const in_file = document.getElementById('in_file');
    const file = in_file.files[0];

    // FormDataにappendする
    const formData = new FormData();
    formData.append('file', file);

    // header情報を指定
    const headers = { "content-type": "multipart/form-data" };
    // 事後処理(.then)・エラー処理(.catch)はご自由に
    axios.post('/postimg', formData, { headers });
}

headersは指定しなくても動いた。よくわからん。
ここが肝と謳っているいる記事もあったため、無いと後々困るかも。

発火はボタンからしているため、getElementByIdを使っているが、onchangeのevent.targetから取り出してもよし。
とにかくinput type="file"の要素からfile情報が取り出せればよい。

バックエンド

SpringBoot側での受け取り。

PostController.java

@RestController
public class PostController {
    @PostMapping("postimg")
    public void postimg(@RequestPart("file") MultiPartFile file) {
        System.out.println(file.getOriginalFilename());
    }
}

これでinputから選んだファイル名が表示されるはず。
@RequestPart("file")ではなく@RequestParam("file")でも動くには動いた。

受け取ったファイルを保存する場合。

これは.png受け取りの場合。

output.java

@RestController
public class PostController {
    @PostMapping("postimg")
    public void postimg(@RequestPart("file") MultipartFile file) {
        System.out.println(file.getOriginalFilename());
        try {
    		File outfile = new File("test.png");
    		copyInputStreamToFile(file.getInputStream(), outfile);
    	} catch (IOException e) {
    	}
    }

	private static void copyInputStreamToFile(InputStream inputStream, File file) throws IOException {
		try (FileOutputStream outputStream = new FileOutputStream(file)) {
			int read;
			byte[] bytes = new byte[1024];
			while ((read = inputStream.read(bytes)) != -1) {
				outputStream.write(bytes, 0, read);
			}
			// commons-io
			// IOUtils.copy(inputStream, outputStream);
		}
	}
}

参考 https://mkyong.com/java/how-to-convert-inputstream-to-file-in-java/
もっと簡単なやり方あったら教えてください。

複数ファイルを指定・送信する場合。

フロントエンド

sample.html

<input type="file" id="in_file" multiple>
<button onclick="onclick()">post</button>

sannple.js

function onclick() {
    // input file から指定したファイルを取り出し。
    const in_file = document.getElementById('in_file');
    
    // FormDataにappendする
    const formData = new FormData();
    
    for(let i = 0; i < in_file.files.length; i++) {
        formData.append('files', in_file.files[i]);
    }
    
    // header情報を指定
    const headers = { "content-type": "multipart/form-data" };
    // 事後処理(.then)・エラー処理(.catch)はご自由に
    axios.post('/postimg', formData, { headers });
}

FormDataの同じ名前('files')にappendすればよいらしい。

バックエンド

Spring側。

PostController.java

@RestController
public class PostController {
    @PostMapping("postimg")
    public void postimg(@RequestPart("files") MultipartFile[] files) {
        for(MultipartFile file : files) {
            System.out.println(file.getOriginalFilename());
        }
    }
}

引数の型を配列にすればよいだけ。
Listでも受け取れる。

以上。