write html 코드
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="/main.css" rel="stylesheet">
</head>
<body>
<div th:replace="~{nav.html::navbar}"></div>
<form action="/add" method="POST">
<input name ="title">
<input name ="price">
<button type="submit">전송</button>
</form>
<input type="file" onchange="getURL(this)">
< img src="">
<script>
async function getURL(e){
let name = encodeURIComponent(e.files[0].name)
let result = await fetch('/presigned-url?filename=' + name)
result = await result.text()
console.log(result)
let uploadResult= await fetch(result, {
method : 'PUT',
body : e.files[0]
})
console.log(uploadResult)
console.log(uploadResult.url.split("?")[0])
if(uploadResult.ok){
document.querySelector('img').src = uploadResult.url.split("?")[0]
await fetch('/add', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
fileUrl:uploadResult
})
});
}else {
console.log("업로드 실패);
}
}
</script>
</body>
</html>
API
@PostMapping("/add")
String addPost(@RequestParam(name = "title") String title,
@RequestParam(name = "price") Integer price,
@RequestParam(name = "fileUrl") String imgUrl){
itemService.saveItem(title, price, imgUrl);
System.out.println(imgUrl);
return "redirect:/list";
}
Item 코드
@Entity
@Data
public class Item {
@Id @GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(nullable = false)
private String title;
@Column(nullable = false)
private Integer price;
private String username;
private String imageURL;
이렇게 설정하고 했는데 안되는데 어떻게 해야하는지 잘모르겠습니다...
