mjeongriver
article thumbnail
Published 2023. 2. 22. 17:55
day91-spring boot TIL/Spring boot

1. 이미지 파일 불러오기

1) 첫번째 방법

 

 

첫번째 사진처럼 value, produces 지정 안하면 이미지도 안나오고 이진 데이터로 나옴, 근데 produces에 image로 지정해주면 2~5번째의 결과를 받을 수 있음

 

* ajaxController

package com.coding404.myweb.controller;

import java.io.File;
import java.io.IOException;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;
import com.coding404.myweb.product.service.ProductService;

@RestController 
public class AjaxController {
	
	//업로드 경로
	@Value("${project.uploadpath}")
	private String uploadpath;
	
	//이미지 정보를 처리
	//1. ?키=값 쿼리스트링(requestparam)
	//2. Pathvariable(가변 url 주소 넣어줌)
	@GetMapping(value = "/display/{filepath}/{uuid}/{filename}", produces="image/png")
	public byte[] display(@PathVariable("filepath") String filepath,
						  @PathVariable("uuid") String uuid,
						  @PathVariable("filename") String filename) {
		
		//업로드 패스가 들어가야 함(파일이 저장된 경로)
		String savename = uploadpath + "\\" + filepath + "\\" + uuid + "_" + filename;
		
		File file = new File(savename);
		
		//저장된 이미지 파일의 이진 데이터 형식을 구함
		byte[] result= null;
		
		try {
			result = FileCopyUtils.copyToByteArray(file);
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		return result;
	}

}

 

2) 심화: 응답 본문에 대한 내용 작성하기

 

 

* ajaxController - responseEntity - 응답 본문을 직접 작성

//responseEntity - 응답 본문을 직접 작성
	@GetMapping("/display/{filepath}/{uuid}/{filename}")
	public ResponseEntity<byte[]> display(@PathVariable("filepath") String filepath,
						  @PathVariable("uuid") String uuid,
						  @PathVariable("filename") String filename) {
		
		//업로드 패스가 들어가야 함(파일이 저장된 경로)
		String savename = uploadpath + "\\" + filepath + "\\" + uuid + "_" + filename;
		
		File file = new File(savename);
		
		//저장된 이미지 파일의 이진 데이터 형식을 구함
		byte[] result= null; //1. data
		ResponseEntity<byte[]> entity = null;
		try {
			result = FileCopyUtils.copyToByteArray(file);
			
			//2. header(뚜껑)
			HttpHeaders header = new HttpHeaders();
			header.add("Content-type", Files.probeContentType(file.toPath())); //파일의 컨텐츠 타입을 직접 구해서 header에 저장
			
			//3. 상태값
			entity = new ResponseEntity<>(result, header, HttpStatus.OK); //데이터, 헤더, 상태값
			
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		return entity;
	}

 

3) ProductList에서 이미지 수정을 눌렀을 때 데이터 베이스에서 저장된 이미지를 가지고 나와야 함

- 누르면 해당 이미지를 가지고 오겠다는 뜻

 

2번째 사진처럼 modalOn 클래스를 빼면 동작 하지 않음

 

- modalOn 클래스가 들어가면 모달창 오픈, modalOn()으로 켤 수 있다.

- 3번째 사진처럼 modal.js의 순서를 확인하고 써주면 모달창 사용 가능함. ($(document).ready 써주기!)

- 4~7번 방법 중 택 1해서 사용 가능

 

* productList 맨 마지막에 script 부분, AjaxController 추가 

더보기

- productList

<!-- 1. modalOn 클래스가 들어가면 모달창 오픈, 2. modalOn()으로 켤 수 있다. -->
<!-- 모달창 제어-->
<script>
	//이미지 수정 버튼을 클릭 했을 때 modalOn();
	$(".modalOn").click(function(e){
		e.preventDefault(); //a링크의 고유 이벤트 중지
		
		//1. ajax - 이미지 데이터 조회(prod_id 기준으로 조회) <클릭한 대상의 prod_id 값>
		var prod_id = $(e.target).closest("td").next().html();
		console.log(prod_id)
		
		//2. post 방식으로 img 데이터 조회
		$.ajax({
			url: "../getProductImg",
			type: "post",
			data: JSON.stringify({prod_id: prod_id}), //데이터
			contentType: "application/json", //보내는 데이터 타입
			success: function(result) {
				console.log(result); //반환된 데이터
			},
			error : function(err) {
				alert("이미지 조회에 실패했습니다.");
			}
		});
		
		//modalOn();
	});
</script>

 

- ajaxController 

 

package com.coding404.myweb.controller;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import com.coding404.myweb.command.ProductUploadVO;
import com.coding404.myweb.command.ProductVO;
import com.coding404.myweb.product.service.ProductService;

@RestController 
public class AjaxController {
	//업로드경로
	@Value("${project.uploadpath}")
	private String uploadpath;
	
	@Autowired
	private ProductService productService;
	
	
	//이미지정보를 처리
	//1. ?키=값
	//2. @Pathvariable
	//화면에는 2진 데이터 타입이 반환됩니다.
//	@GetMapping("/display/{filepath}/{uuid}/{filename}")
//	public byte[] display(@PathVariable("filepath") String filepath,
//						  @PathVariable("uuid") String uuid,
//						  @PathVariable("filename") String filename) {
//		
//		//파일이 저장된 경로
//		String savename = uploadpath + "\\" + filepath + "\\" + uuid + "_" + filename;
//		
//		File file = new File(savename);
//		//저장된 이미지파일의 이진데이터 형식음 구함
//		byte[] result = null;
//		try {
//			result = FileCopyUtils.copyToByteArray(file);
//		} catch (IOException e) {
//			e.printStackTrace();
//		}
//		return result;
//	}
	
	
	//ResponseEntity - 응답본문을 직접 작성
	@GetMapping("/display/{filepath}/{uuid}/{filename}")
	public ResponseEntity<byte[]> display(@PathVariable("filepath") String filepath,
										  @PathVariable("uuid") String uuid,
										  @PathVariable("filename") String filename) {
		
		//파일이 저장된 경로
		String savename = uploadpath + "\\" + filepath + "\\" + uuid + "_" + filename;
		
		File file = new File(savename);
		//저장된 이미지파일의 이진데이터 형식음 구함
		
		byte[] result = null; //1. data
		ResponseEntity<byte[]> entity = null;
		try {
			result = FileCopyUtils.copyToByteArray(file);
			//2. header
			HttpHeaders header = new HttpHeaders();
			header.add("Content-type", Files.probeContentType(file.toPath())); //파일의 컨텐츠타입을 직접 구해서 header에 저장
			//3. 응답본문
			entity = new ResponseEntity<>(result, header, HttpStatus.OK); //데이터, 헤더, 상태값
			
		} catch (IOException e) {
			e.printStackTrace();
		}
		return entity;
	}
	
	//prod_id값을 받아서 이미지정보를 반환 (함수의 모형을 선언)
	@PostMapping("/getProductImg")
	public ResponseEntity<List<ProductUploadVO>> getProductImg(@RequestBody ProductVO vo) { //vo, map
		return new ResponseEntity<>(productService.getProductImg(vo), HttpStatus.OK);
	}

}

 

- service, mapper.java에 이미지 데이터 조회 넣어줄 것

 

 

- impl 오버라이딩

 

 

- mapper.xml

 

	<!-- 이미지 데이터 조회 -->
  	<select id ="getProductImg" resultType="ProductUploadVO">
  	 	select * from PRODUCT_UPLOAD where prod_id = #{prod.id}
  	</select>

 

- ProductList

 

<!-- 1. modalOn클래스 들어가면 모달창오픈, 2. modalOn() 으로 켤수 있음 -->
<!-- 모달창 제어 -->
<script>
	//이미지 수정버튼을 클릭했을 때 modalOn(); 
	$(".modalOn").click(function(e) {
		e.preventDefault(); //a링크의 고유이벤트 중지
		
		//1. 클릭한 대상의 prod_id값
		var prod_id = $(e.target).closest("td").next().html();
		
		//2. post방식으로 img데이터 조회
		$.ajax({
			url : "../getProductImg",
			type: "post",
			data: JSON.stringify({prod_id: prod_id}), //데이터
			contentType: "application/json", //보내는데이터타입
			success: function(result) {
				console.log(result); //반환된데이터
				
				
				var str = "";
				var arr = ['a', 'b', 'c'];
				for(var i = 0; i < result.length; i++) {
					str += '<div class="left">';
					str += '<span>추가이미지</span>';
					str += '<label class="upload-display" for="'+ arr[i] +'_file">';
					str += '<span class="upload-thumb-wrap">';
					str += '<img class="upload-thumb" src="'+ '../display/' + result[i].filepath + '/' + result[i].uuid + '/' + result[i].filename +'">';
					str += '</span>';
					str += '</label>';
					str += '<input class="upload-name" value="파일선택" disabled="disabled">';
					str += '<input type="file" name="file" id="'+ arr[i] +'_file" class="upload-hidden">';
					str += '<input type="hidden" value="">';
					str += '<input type="hidden" value="">';
					str += '<button type="button" class="normal_btn" style="display: block;">삭제</button>';
					str += '</div>';
				}
				$(".filebox").html(str);
	
			},
			error : function(err) {
				alert("이미지 조회에 실패했습니다");
			}
		});
		
		//modalOn(); 
	});		
		
</script>

 

2. 파일 다운로드

* ajaxController

- url에 주소 하면 사진 파일 다운로드 됨. 버튼이랑 연결만 해주면 끝!

@GetMapping("/download/{filepath}/{uuid}/{filename}")
	public ResponseEntity<byte[]> download(@PathVariable("filepath") String filepath,
										  @PathVariable("uuid") String uuid,
										  @PathVariable("filename") String filename) {
		
		//파일이 저장된 경로
		String savename = uploadpath + "\\" + filepath + "\\" + uuid + "_" + filename;
		
		File file = new File(savename);
		//저장된 이미지파일의 이진데이터 형식음 구함
		
		byte[] result = null; //1. data
		ResponseEntity<byte[]> entity = null;
		try {
			result = FileCopyUtils.copyToByteArray(file);
			//2. header
			HttpHeaders header = new HttpHeaders();
			
			//다운로드임을 명시
			header.add("Content-Disposition", "attachment; filename=" + filename );
			
			//3. 응답본문
			entity = new ResponseEntity<>(result, header, HttpStatus.OK); //데이터, 헤더, 상태값
			
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		System.out.println("이미지 호출 실행됨");
		
		return entity;
	}

 

3. 세션과 인터셉터

 

 

- bootBasic에서 실행

 

 

* UserVO, UserController, login, mypage.html

더보기

- UserVO

package com.simple.basic.command;

import java.util.List;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class UsersVO<T> {

	private String id;
	private String pw;
	private String name;
	private String email;
	
	//1: N 조인에서는 N쪽을 list로 처리
	private List<T> memoList;
	
}

 

- UserController

package com.simple.basic.controller;

import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.simple.basic.command.UsersVO;

@Controller
@RequestMapping("/user")
public class UserController {

	@GetMapping("/login")
	public String login() {
		return "user/login";
	}
	
	//로그인 기능
	@PostMapping("/login")
	public String loginForm(UsersVO vo, HttpSession session) {
		//select * from 유저 where id = ? and pw = ?
		
		//서비스 영역 호출(로그인 성공)
		UsersVO userVO = new UsersVO();
		userVO.setId("aaa");
		userVO.setPw("홍길동");
		
		//로그인 성공 = 세션을 이용해서 인증값
		if( userVO != null) {
			session.setAttribute("user_id", userVO.getId()); //토큰
			return "redirect:/user/mypage"; //로그인 성공
		}
		
		return "user/login"; //로그인 실패
	}
	
	//특정 유저들만 접근할 수 있는 페이지
	@GetMapping("/mypage") 
	public String mypage(/*HttpSession session*/) {
		
		//세션 검사
		/*
		if(session.getAttribute("user_id") == null) {
			return "redirect:/user/login";
		}
		*/
		return "user/mypage";
	}
	
	//특정 유저들만 접근할 수 있는 페이지
	@GetMapping("/info")
	public String info() {
		return "user/info";
	}
}

 

- login

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="login" method="post">
	<input type="text" name="id">
	<input type="password" name="pw">
	<input type="submit" value="로그인">
</form>

</body>
</html>

 

- mypage

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h3>세션 값이 있다면 session.이름으로 사용 가능 합니다.</h3>
	[[${session.user_id}]]

</body>
</html>

기존에 userVO.setId("aaa")라고 두고 session에 userVO.getId를 저장 - mypage에서 session에 있는 user_id를 꺼내면 aaa가 나옴

'TIL > Spring boot' 카테고리의 다른 글

windows에서 java 환경변수 설정하기  (0) 2023.06.12
day92-spring boot  (0) 2023.02.23
day90-spring boot  (0) 2023.02.21
day88-spring boot  (0) 2023.02.17
day86-spring boot  (0) 2023.02.16
profile

mjeongriver

@mjeongriver

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그

티스토리툴바