<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Excelアップロード</title>
</head>
<body>
<h1>Excelアップロード</h1>
<form enctype="multipart/form-data">
<input type="file" id="excelFile" accept=".xlsx,.xls">
<br><br>
<button type="button" onclick="upload()">アップロードする</button>
</form>
<script>
function upload() {
const fileInput = document.getElementById('excelFile');
const file = fileInput.files[0];
if (!file) {
alert('ファイルを選択してください');
return;
}
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
alert('アップロードに成功しました！');
} else {
alert('アップロードに失敗しました');
}
})
.catch(error => {
alert('アップロードに失敗しました');
console.error(error);
});
}
</script>
</body>
</html>
後は、サーバーサイドでファイルを受け取り、Apache POIを使ってExcelを解析し、MySQLにデータを登録すればいいです。Spring BootとVue.jsを使ったサンプルアプリは、以下のページが参考になります。
https://spring.io/guides/gs/uploading-files/
https://github.com/vuejs/vue-file-upload
