前端一个文本框两个按钮一个上传按钮一个取消按钮上传excel文件然后后端获取excel中的数据存储到一个数组前段用thymeleaf后端用Spring boot

首先，在前端页面中添加一个文本框、两个按钮和一个上传按钮以及一个取消按钮，代码如下：

<form method="post" enctype="multipart/form-data" action="/upload">
  <input type="text" name="filename" placeholder="文件名" required>
  <input type="button" value="确定" onclick="submitForm()">
  <input type="button" value="取消" onclick="cancelForm()">
  <input type="file" name="file" id="file" style="display:none" onchange="uploadFile()">
  <input type="button" value="上传" onclick="document.getElementById('file').click()">
</form>

其中，文件名文本框用于输入上传的文件名，确定按钮和取消按钮分别用于提交和取消上传操作，上传按钮用于触发文件选择框，文件选择框选择文件后会触发上传文件的操作。

接下来，在JS中实现上传文件和提交表单的操作，代码如下：

function uploadFile() {
  var file = document.getElementById('file').files[0];
  var formData = new FormData();
  formData.append('file', file);
  fetch('/upload-file', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())
  .then(data => {
    console.log(data);
  });
}

function submitForm() {
  var filename = document.getElementsByName('filename')[0].value;
  fetch('/upload', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      filename: filename
    })
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });
}

function cancelForm() {
  document.getElementsByName('filename')[0].value = '';
}

在上传文件的操作中，首先获取选择的文件，然后创建FormData对象，将文件添加到FormData中，然后使用fetch API发送POST请求到后端的/upload-file接口，并在响应成功后将返回的文本打印到控制台中。

在提交表单的操作中，首先获取输入的文件名，然后使用fetch API发送POST请求到后端的/upload接口，并在响应成功后将返回的JSON对象打印到控制台中。

最后，在后端代码中使用Spring Boot来接收上传的文件和表单数据，并将Excel中的数据存储到一个数组中，代码如下：

@PostMapping("/upload-file")
public String uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
    Workbook workbook = WorkbookFactory.create(file.getInputStream());
    Sheet sheet = workbook.getSheetAt(0);
    List<String[]> data = new ArrayList<>();
    for (Row row : sheet) {
        String[] rowData = new String[row.getLastCellNum()];
        for (int i = 0; i < row.getLastCellNum(); i++) {
            Cell cell = row.getCell(i);
            if (cell != null) {
                rowData[i] = cell.toString();
            }
        }
        data.add(rowData);
    }
    return "success";
}

@PostMapping("/upload")
public String upload(@RequestBody Map<String, String> params) {
    String filename = params.get("filename");
    // TODO: save data to database using filename and data from upload-file
    return "success";
}

在上传文件的接口中，使用WorkbookFactory类创建Workbook对象，然后获取第一个Sheet对象，在Sheet对象中循环遍历每一行和每一列，将单元格的值转换为字符串，并将一行数据存储到一个String数组中，最后将所有行的数据存储到一个List中。

在提交表单的接口中，使用@RequestBody注解将请求体中的JSON对象转换为Map对象，然后获取文件名参数，将文件名和上传的数据存储到数据库中即可