Я создаю функцию, которая отправляет изображение на сервер с помощью JavaScript и Spring Boot.
Однако при использовании fetch API в codeе JavaScript для отправки файла изображения на сервер сервер не может быть доступен и возникает ошибка 404.
add-page.html
ImageController
Если я отправляю тип String в formData, он нормально поступает в контроллер, но если я отправляю его, включая File, он не поступает в контроллер и возникает ошибка 404 not found.
Может ли кто-нибудь сказать мне, как отправить файл изображения в formData с помощью функции fetch?
Я пробовал изменить Content-Type на multipart/form-data, но это не сработало.
Когда я использую Post Man для отправки изображения, оно поступает в контроллер, но когда я использую функцию fetch, оно не входит в контроллер.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Document</title>
<script type="text/javascript" th:inline="javascript">
function submitImage() {
const name = document.querySelector('input[name="name"]').value;
const image = document.querySelector('input[type="file"]').files[0];
const formData = new FormData();
formData.append('image', image);
formData.append('name', name);
fetch('/add', {
method: 'POST',
body: formData
})
.then(response => {
console.log(response)
})
.catch(error => {
console.error('Error', error);
});
}
</script>
</head>
<body>
<div class="container">
<div class="mt-5">
<input type="file" name="image" class="form-control mt-2">
<input name="name" class="form-control me-2" type="search" placeholder="enter" aria-label="Search">
<button class="btn btn-outline-success" type="button" onclick="submitImage()">
submit
</button>
</div>
</div>
</body>
</html>
@Controller
public class ImageController {
@GetMapping("/add")
public String getAddPage() {
return "add-page";
}
@PostMapping("/add")
public String add(@RequestParam("image") MultipartFile image, @RequestParam("name") String name){
System.out.println(image);
System.out.println(name);
return "add-page";
}
}