23-02-22) 스프링 부트 10강 2편 - 이미지 파일 불러오기, 다운로드

< 이미지 파일 불러오기 >

* img 태그의 src 속성에 경로를 적는 것은

  사실 서버에 데이터를 요청하는 방식과 같다 .

 ex) src =" http://  경로"  -> 풀경로임.

그래서 우리는 controller 로 보내는 요청을 src에 담을것.

# productList.html 페이지

* 이미지 수정 버튼을 누르면 메서드 실행.

- 우선 a링크의 고유한 이벤트(화면이동)를 중지시킴.

e.preventDefault(); //a링크의 고유이벤트 중지

- 페이지 내에서 해당하는 해당 상품에대한 이미지 데이터를 분류해오기 위해 pk 값인

  prod_id 값을 구해옴.

		//1. 클릭한 대상의 prod_id값
		var prod_id = $(e.target).closest("td").next().html();

- 구해온 pk 값을 통해서 해당 상품에 대한 이미지 관련 데이터를 달라고 요청을 보냄.

  원래 img 데이터 조회는 get 방식으로 요청하는게 보통이지만 ,

  우리는 post 방식으로 해봤음.

  제이슨 형식으로 데이터를 넘김.

- 요청이 성공적으로 완료되면 

  이미지 수정 모달 창에서 img 파일들을 보여주는 태그를 

  해당 상품이 갖고 있는 이미지 파일의 갯수만큼 반복해서 그려주도록 처리한다.

  

  실질적으로 이미지가 그려지는 img 태그에서 src 값으로 

  받아온 이미지의 데이터를 이용하여 경로를 설정해준다. 

  이미지를 불러올 때 src에 써주는 경로는 사실상 서버에 요청을 보내서 응답을 받는 방식이다.

  그래서 요청하는 주소와 쿼리파라미터(=쿼리파람) 방식으로  

  이미지 파일의 경로에 대한 정보를 부분적으로 이어서 get 방식으로 요청을 보내도록

  경로를 작성해주었다.

 

- 마지막으로

  완성된 이미지를 그려주는 태그를 

  이미지가 그려질 위치에 제이쿼리 방식으로 innerhtml 되도록 처리해주었다.

 

- 위 모든 내용 코드 확인 

<!-- 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();
		/* 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); // 반환된 데이터
				
				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 += '<button type="button" class="normal_btn" style="display: block;">다운로드</button>';
					str += '<a href="#" class="normal_btn" style="display: block;">다운로드</a>';
					str += '</div>';
				}
				
				$(".filebox").html(str);
				
				
			},
			error : function(err){
				alert("이미지 조회에 실패했습니다");
			}
		});
		
		//modalOn();
	});
</script>

 

# 컨트롤러 (AjaxController.java) 

 

* prod_id값을 받아서 이미지정보를 반환

- 화면에서 해당 상품의 이미지 파일을 갖고오기 위해서,

  select 구문에서 사용할 pk 값인 prod_id를 post 방식의 json 타입으로 받아왔다.

  자바에서 사용할 수 있는 객체로 변환해서 pk 값을 받도록 

  @RequestBody 를 선언해주고 ProductVO 에 prod_id 라는 변수가 있으므로 

  ProductVO 객체로 값을 받았다.

- 서비스와 맵퍼 영역에서 select 구문을 통해 해당하는 상품의 img 파일들에대한 정보를 

  List<ProductUploadVO> 로 받아왔다.

 이값을 ResponseEntity()에 담아서 화면페이지에 다시 응답으로 보내줌.

( ResponseEntity란?

스프링에서 제공하는 ResponseEntity타입은 개발자가 직접 결과 데이터와 HTTP상태코드를 직접 제어할 수 있는 클래스다.

ResponseEntity를 사용하면 404나 500같은 에러를 전송하고 싶은 데이터와 함께 전송할 수 있기 때문에 좀더 세밀한 제어가 가능해진다. )

 

 

		@Value("${project.uploadpath}")
	private String uploadpath;
	
	@Autowired
	private ProductService productService;
    
    //prod_id값을 받아서 이미지정보를 반환 ( 함수의 모형을 선언 )
	@PostMapping("/getProductImg")
	public ResponseEntity<List<ProductUploadVO>> getProductImg(@RequestBody ProductVO vo) {//vo, map
		return new ResponseEntity<>(productService.getProductImg(vo), HttpStatus.OK);
	}

* 이미지 파일 불러오기

 - 넘어온 데이터로 이미지 파일의 경로를 담는 file 객체를 생성.

 - 이미지 파일은 우리는 그림으로 보지만 실질적으로는 이진데이터 형식으로 저장되어있음.

   저장된 이미지 파일의 이진데이터 형식을 구해와서 byte[] 배열로 담았음.

   img 파일의 이진형식의 데이터를 복사해서 img 데이터 를 result에 담았음.

 

출처 : https://m.blog.naver.com/gaeean/221739006045

- 헤더부분에는 img 파일의 mime타입(img 파일의 원래 확장자) 를 구해서 담아주었음 

- ResponseEntity의 status 부분에

   HttpStatus.OK 는 200을 나타냄.

- 완성된 entity를 응답으로 반환해줌 ( 화면에 비로소 이미지가 보이게 되는것)

	//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();
		}
		
		System.out.println("이미지호출 응답됨.");
		
		return entity;
	}

 

 

# 서비스 영역 ->  ProductService (인터페이스) , ProductServiceImpl (인터페이스 구현부)

* ProductService (인터페이스)

	//이미지데이터조회
	public List<ProductUploadVO> getProductImg(ProductVO vo);

*  ProductServiceImpl (인터페이스 구현부)

	@Override
	public List<ProductUploadVO> getProductImg(ProductVO vo) {
		return productMapper.getProductImg(vo);
	}

 

# Mapper 영역 -> ProductMapper.java (맵퍼 인터페이스), ProductMapper.xml (맵퍼 구현부)

* ProductMapper.java (맵퍼 인터페이스)

//이미지 데이터 조회
	public List<ProductUploadVO> getProductImg(ProductVO vo);

* ProductMapper.xml (맵퍼 구현부)

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

 

 

 

 

 

------------------------------------------------------------------------------------------------------------------------------------------

<파일 다운로드>

* 응답헤더에 아래를 담아주면 다운로드가 된다.

Content-Disposition, attachment; filename=filename.csv

HttpHeaders header = new HttpHeaders();
//다운로드임을 명시
header.add("Content-Disposition", "attachment; filename=" + filename); //파일의 컨텐츠타입을 직접 구해서 header에 저장

* 컨트롤러에서 다운로드 기능전체 코드

	//다운로드 기능 - 
	@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); //파일의 컨텐츠타입을 직접 구해서 header에 저장
			
			//3. 응답본문
			entity = new ResponseEntity<>(result, header, HttpStatus.OK); //데이터, 헤더, 상태값
			
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		System.out.println("이미지호출 응답됨.");
		
		return entity;
	}