부트캠프87일차 (ajax)

1) summernote를 ajax을 이용해서 파일업로드

 

 

1-1) layout에 summernote 추가

<%-- summernote 관련 설정
    jquery, bootstrap 기능 사용 --%>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.js"></script>

 

1-2)write,update,reply 페이지에 scripte부분에 ajax을 이용한 요청 추가

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#summernote").summernote({
				height : 300,
				callbacks:{
					onImageUpload:function(images){
						for(let i=0;i<images.length;i++){
                        //이미지업로드 이벤트발생 시 sendFile호출
							sendFile(images[i])
						}
					}
				}
			})
		})
		function sendFile(file){
			//new FormData() : 파일업로드를 위한 데이터 컨테이너생성
			let data = new FormData();
			data.append("image",file); //컨테이너에 이미지객체 추가
			$.ajax({ //ajax이용해 파일업로드
				url:"/ajax/uploadImage", //요청URL(ajax컨트롤러)
				type:"post",
				data:data, //전송할 데이터:컨테이너
				processData:false,
				cache:false,
				contentType:false,
				//src에 uploadImage에서 처리한 url이 넘어올거임
				success:function(src){
				//성공시 summernote에 img삽입
					$("#summernote").summernote("insertImage",src);
				},
				error:function(e){ //서버응답오류
					alert("이미지업로드실패 : "+e.status)
				}			
			})
		}
	</script>

 

 

 

resource/ application.properties

summernote.imgupload=D:/dongGit/springStudy/shop2/src/main/webapp/

 

ajax컨트롤러를 하나 만들어주자

ajax은 RestController를 사용함을 잊지말자

 

 

controller/AjaxController

 

 * @RestController :  @Component + Controller + 클라이언트로 데이터 직접전송
 *  Mapping메서드의 리턴타입 : String : 클라이언트로 전달되는 문자열값
 *  Mapping메서드의 리턴타입 : Object : 클라이언트로 전달되는 문자열값 ,JSON형식처리
 * spring 4.0이후에 추가됨

package kr.gdu.controller;
import org.springframework.web.multipart.MultipartFile;
import kr.gdu.service.BoardService;
/*
 * @Controller : @Component + Controller 기능
 * 		Mapping메서드의 리턴타입 : modelAndView : view이름 + 데이터
 * 		Mapping메서드의 리턴타입 : String : view이름 
 * 
 * @RestController :  @Component + Controller + 클라이언트로 데이터 직접전송
 * 		Mapping메서드의 리턴타입 : String : 클라이언트로 전달되는 문자열값
 * 		Mapping메서드의 리턴타입 : Object : 클라이언트로 전달되는 문자열값 ,JSON형식처리
 * spring 4.0이후에 추가됨
 * spring 4.0이전에는 @ResponseBody 기능을사용
 */
@RestController
@RequestMapping("ajax")
public class AjaxController {
	
	@Autowired
	BoardService service;
    
    //produces="text/plain; charset=UTF-8" : 전송될 데이터의 형식
	@PostMapping(value="uploadImage",produces="text/plain; charset=UTF-8")
	public String summernoteImageUpload(@RequestParam("image")MultipartFile mulitpartFile) {
		return service.summernoteImageUpload(mulitpartFile);
		
	}

}

 

service/BoardService

appliaction.properties의 환경변수값 읽어오기

service최상단에 다음과같이 String필드를 추가하고

application.properties에 설정한이름을 @value로설정

 

summernoteImageUpload메서드 설정

@Value("${summernote.imgupload}")
	private String UPLOAD_IMAGE_DIR;
    
   // ...... 중간생략
    
public String summernoteImageUpload(MultipartFile multipartFile) {
		File dir = new File(UPLOAD_IMAGE_DIR+"board/image");
		if(!dir.exists()) {
			dir.mkdirs();
		}
		//파일의 이름
		String fileSystemName = multipartFile.getOriginalFilename();
		
		File file = new File(dir,fileSystemName);
		try {
			multipartFile.transferTo(file);
		}
		catch (Exception e) {
			e.printStackTrace();
		}
		return "/board/image/"+fileSystemName;
	}