IT/Spring
[Spring Boot] Ajax와 FormData 객체를 이용한 이미지 전송
Bamdule
2020. 8. 18. 17:18
본 테스트는 jquery를 이용했습니다.
1. FormData 란
FormData는 <form> 태그의 역할을 수행하는 객체이다.
FormData를 사용하면 반드시 ContentType과 processData를 false로 해주어야 한다.
contentType을 false로 설정해줄 경우 contentType이 자동으로 아래와 같이 설정된다.
multipart/form-data; boundary=----WebKitFormBoundaryzS65BXVvgmggfL5A
1) FormData 생성
var formData = new FormData(); or new FormData(form);
2) Form에 데이터 삽입
formData.append(key, value); // input태그를 통해 데이터를 삽입하는 방식과 동일하다.
2. 예제
1). member.html
<html>
...
<form id="editForm">
<input name="id" value="2020"/>
<input type="file" name="file"/>
<button id="saveBtn" type="button">저장</button>
</form>
...
</html>2). member.js
$(document).ready(function () {
var editForm = $("#editForm");
$("#saveBtn").click(function () {
var formData = new FormData(editForm[0]);
formData.append("name", "kim");
formData.append("description", "how are you?");
$.ajax({
method: "POST",
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function () {
console.log("completed!");
},
error: function () {
alert("failed! ")
}
});
});
});
formData.append(key, value)를 통해 input 태그없이 추가적으로 데이터를 삽입할 수 있다.
3). MemberTO
public class MemberTO {
private int id;
private String name;
private String description;
private MultipartFile file;
//getter,setter,toStrng 생략
}4). TestController
@Controller
public class TestController{
@GetMapping(value = "/member")
public String memberPage() {
return "page/member";
}
@ResponseBody
@PostMapping(value = "/member")
@ResponseStatus(HttpStatus.NO_CONTENT)
public void memberData(MemberTO member) {
logger.info("[MYTEST] {} {}", member, member.getFile().getOriginalFilename());
}
}5). 결과
5-1) form Data
5-2) log
[MYTEST] Test{id=2020, name=kim, description=how are you?} 2.png
