게시물 이미지 띄우기, 다운로드

슬·2024년 11월 8일
Spring

스프링

목록 보기
18/33

BoardVo에 있던 filename을 주석처리를 한 이유가 컨트롤러에 있는 boardWriteAction에 있는 메서드에 같은 이름이 있어서 충돌이 일어날까봐 주석처리를 했던 것이다.
하지만 boardContents.jsp에서 첨부파일 기능의 name값을 filename으로 했기 때문에 차라리
컨트롤러 메서드 안에 있는 이름을 바꿔주기로 했다.

1. boardWrite.jsp에 있는 파일 이름을 attachfile로 바꿔준다.

2. 컨트롤러에서 boardWriteAction메서드 안에 있는 filename이름도 바꿔주기.

이제 BoardVO에 있는 filename을 주석처리 풀어주면 된다.

그리고 boardContents.jsp 상단에 있는 midx값이 오류가 나는데, 처음 값을 받을 때 String으로 받아왔기 때문에 강제 형변환을 해줘야한다. 

 int midx =0;
 if(session.getAttribute("midx") != null) {
	 midx = Integer.parseInt(session.getAttribute("midx").toString());
 }

3. 이렇게 바꿔주면 된다.

이미지 띄우기

스프링에서는 이미지 저장하는 곳을 프로젝트와 상관없는 곳에 ㅅ위치시켰기 때문에(보안상의 이유로 ) 경로를 바꿔줘야 한다. 가상경로를 만들어주기 /

@RequestMapping(value="/displayFile.aws", method=RequestMethod.GET)
	public ResponseEntity<byte[]> displayFile(
			@RequestParam("fileName") String fileName,
			@RequestParam(value="down", defaultValue="0") int down   // 화면에 보여줄 것인가. 다운로드 하게 할 것인가?
			) {
		
		ResponseEntity<byte[]> entity = null;  //객체를 담는 애인데 byte계열을 다 담는다. 
		InputStream in = null;	// 데이터의 수로와 같은데, 처음에 읽어들이는 시작점이 InputStream
		
		try{
			String formatName = fileName.substring(fileName.lastIndexOf(".")+1); // 확장자가 무엇인지 물어본다.
			MediaType mType = MediaUtils.getMediaType(formatName); // 위에서 확장자를 꺼내서 미디어 유틸이라는 곳에 넣는다. 왜냐면 여기서 확장자가 무엇인지 타입을 알기 위해서 (png,jpg)
			
			HttpHeaders headers = new HttpHeaders();		
			 
			in = new FileInputStream(uploadPath+fileName);  // 위에서 초기화한 애를 객체생성시켜서 해당되는 파일 위치를 
			
			
			if(mType != null){
				
				if (down==1) {
					fileName = fileName.substring(fileName.indexOf("_")+1);
					headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
					headers.add("Content-Disposition", "attachment; filename=\""+
							new String(fileName.getBytes("UTF-8"),"ISO-8859-1")+"\"");	
				}else {
					headers.setContentType(mType);	
				}
			}else{
				
				fileName = fileName.substring(fileName.indexOf("_")+1);
				headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
				headers.add("Content-Disposition", "attachment; filename=\""+
						new String(fileName.getBytes("UTF-8"),"ISO-8859-1")+"\"");				
			}
			entity = new ResponseEntity<byte[]>(IOUtils.toByteArray(in),
					headers,
					HttpStatus.CREATED);
			
		}catch(Exception e){
			e.printStackTrace();
			entity = new ResponseEntity<byte[]>(HttpStatus.BAD_REQUEST);
		}finally{
			try {
				in.close();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
		
		return entity;
	}
  1. 컨트롤러로 가서 메서드 하나 만들어야 하는데,

이 코드는 파일을 화면에 보여주거나 다운로드할 수 있는 REST API 엔드포인트입니다. 클라이언트가 파일 이름과 다운로드 여부를 요청으로 전송하면, 서버는 해당 파일을 찾아 반환하거나 화면에 표시할 수 있는 ResponseEntity를 생성하여 응답합니다.

코드 설명
@RequestMapping 어노테이션

value="/displayFile.aws": 이 메서드는 /displayFile.aws 경로로 접근했을 때 호출됩니다.
method=RequestMethod.GET: HTTP GET 요청에만 응답합니다.
메서드 파라미터

@RequestParam("fileName") String fileName: 클라이언트에서 전송한 파일 이름을 fileName 변수에 저장합니다.
@RequestParam(value="down", defaultValue="0") int down: down은 다운로드 여부를 결정하는 파라미터입니다. 기본값은 0이며, down이 1이면 다운로드용으로 응답을 생성합니다.
ResponseEntity<byte[]>와 InputStream 초기화

ResponseEntity<byte[]> entity: 응답 데이터를 담을 객체로, byte[] 배열로 파일 데이터를 저장합니다.
InputStream in: 파일을 읽어오는 입력 스트림으로, 나중에 실제 파일을 InputStream으로 읽어옵니다.
파일 확장자 추출 및 MIME 타입 결정

String formatName = fileName.substring(fileName.lastIndexOf(".")+1);: 파일 이름에서 확장자를 추출합니다.
MediaType mType = MediaUtils.getMediaType(formatName);: MediaUtils 클래스에서 확장자를 기반으로 미디어 타입(MediaType)을 가져옵니다. 이 단계에서 파일이 이미지인지 확인합니다.
HttpHeaders 설정

HttpHeaders headers = new HttpHeaders();: 응답 헤더를 설정하기 위한 객체입니다.
in = new FileInputStream(uploadPath + fileName);: fileName에 해당하는 파일을 FileInputStream으로 읽어옵니다.
다운로드 설정 또는 화면 표시

if (mType != null): mType이 null이 아니라면 파일은 이미지 같은 미디어 파일로 간주됩니다.
if (down == 1): down이 1이면, 파일 다운로드용 헤더 설정을 진행합니다.
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);: 바이너리 형식으로 다운로드되도록 Content-Type을 설정합니다.
headers.add("Content-Disposition", ...): Content-Disposition 헤더로 첨부 파일 이름을 설정하여 브라우저가 파일을 다운로드하도록 유도합니다.
else: down이 0이면, 이미지 등 화면에 표시할 수 있는 타입으로 응답을 생성합니다.
else 구문: mType이 null이면 이미지가 아닌 파일로 간주하고, 다운로드용 헤더를 설정합니다.
ResponseEntity 생성 및 파일 데이터 전송

IOUtils.toByteArray(in): InputStream에서 파일 데이터를 읽어 byte[] 배열로 변환합니다.
new ResponseEntity<byte[]>(IOUtils.toByteArray(in), headers, HttpStatus.CREATED): 변환된 파일 데이터와 설정된 헤더, 상태 코드 201 Created로 ResponseEntity를 생성합니다.
예외 처리 및 스트림 종료

catch (Exception e): 파일을 읽어오는 중 오류가 발생하면, 로그를 출력하고 BAD_REQUEST 응답을 반환합니다.
finally 블록에서 in.close()로 InputStream을 닫아 자원을 해제합니다.
전체 동작
파일 이름과 다운로드 여부를 받아 해당 파일을 읽어와, down 값에 따라 파일을 화면에 표시하거나 다운로드할 수 있도록 응답을 반환하는 기능을 수행합니다.

 	<% if (bv.getFilename() == null || bv.getFilename().equals("") ) {}else { %>
	<img src="<%=request.getContextPath()%>/board/displayFile.aws?fileName=<%=bv.getFilename()%>">
	<P>
	<a href="<%=request.getContextPath()%>/board/displayFile.aws?fileName=<%=bv.getFilename()%>&down=1" class="fileDown">	
	첨부파일 다운로드
	</a>
	</P>
	<%} %>
  1. 보드컨텐츠로 가서 파일 다운 부분에 경로를 수정해준다.

REST API 엔드포인트??

REST API 엔드포인트는 RESTful API가 제공하는 특정 리소스에 접근하는 URL입니다. 이 URL을 통해 클라이언트가 서버의 데이터를 조회하거나 수정 등의 작업을 요청할 수 있습니다. REST API 엔드포인트는 주로 GET, POST, PUT, DELETE 같은 HTTP 메서드를 사용하여 서버에서 제공하는 다양한 리소스에 접근하게 합니다.

예를 들어, /users라는 엔드포인트가 있다면, 클라이언트는 이를 통해 사용자 정보를 요청하거나, 새 사용자를 추가할 수 있습니다.

HTTP 메서드와 엔드포인트 예시:
GET /users → 모든 사용자 목록 조회
POST /users → 새로운 사용자 추가
GET /users/{id} → 특정 사용자 정보 조회
PUT /users/{id} → 특정 사용자 정보 수정
DELETE /users/{id} → 특정 사용자 삭제
REST API 엔드포인트는 서버가 클라이언트 요청을 받아들이는 접속점으로서, 클라이언트와 서버 간의 데이터 교환을 가능하게 해주는 중요한 역할을 합니다.

원본파일 띄우기

현재는 db에 -s로 썸네일이 들어가고 있는데, 전체경로로 바꿔서 썸네일이 아닌 진자 사진이 들어가는 것으로 변결 할거임

//파일 이름을 받아서 해당 파일이 이미지 파일인지 확인하는 역할
function checkImageType(fileName) {
	var pattern = /jpg$|gif$|png$|jpeg$/i;   // 파일 확장자가 jpg, gif, png, jpeg로 끝나는지 검사하는 자바 정규표현식
	return fileName.match(pattern); 		// 정규표현식과 일치하는지 확인
}
  1. 보트컨텐츠에서 자바스크립트로 함수를 하나 만든다.

이 함수 checkImageType은 파일 이름을 받아서 해당 파일이 이미지 파일인지 확인하는 역할을 합니다. 이미지 파일의 확장자가 .jpg, .gif, .png, 또는 .jpeg 중 하나인지를 검사하여, 이미지 파일이 맞으면 true 값을 반환하고, 그렇지 않으면 null을 반환합니다.

jpg,gif, gif, png,jpeg, jpeg는 각각의 문자열이 해당 확장자로 끝나는지 검사합니다.
|는 "또는"을 의미하므로, 파일 이름이 이 네 가지 확장자 중 하나로 끝나면 일치합니다.
$는 문자열 끝을 의미하여, 파일의 마지막 부분이 확장자임을 확인합니다.
i 플래그는 대소문자 구분을 하지 않도록 설정합니다.
fileName.match(pattern):
fileName 문자열에서 정규표현식 pattern과 일치하는 부분을 찾습니다.
일치하면 해당 값이 반환되고, 없으면 null을 반환합니다.

function getOriginalFileName(fileName) {  // 원본 파일이름 추출
	var idx = fileName.lastIndexOf("_")+1; // 마지막 "_" 문자의 위치를 찾고 그 다음 위치를 저장
	return fileName.substr(idx);   // idx 위치부터 문자열의 끝까지 반환
}
  1. 그아래 새로운 함수도 하나 만들어ㅏ준다.

이 함수 getOriginalFileName은 파일 이름에서 원본 파일 이름만 추출하는 기능을 수행합니다. 주로 파일 이름에 식별을 위해 추가된 접두사가 포함되어 있을 때, 그 접두사를 제거하고 원본 이름만 반환하려는 용도로 사용됩니다.

fileName.lastIndexOf("_"):

fileName 문자열에서 마지막으로 나타나는 "" 문자의 인덱스를 찾습니다.
예를 들어, "2023_11_08_example.jpg"라는 파일 이름이 있다면, 마지막 ""의 위치는 9입니다.
lastIndexOf("_") + 1:

"" 이후의 문자열부터 원본 파일 이름으로 추출하기 위해, 인덱스에 1을 더해 "" 다음 위치를 가져옵니다.
예: "202311_08_example.jpg"에서 lastIndexOf("") + 1은 10이 됩니다.
fileName.substr(idx):

fileName 문자열에서 idx 위치부터 끝까지 잘라내어 반환합니다.
예를 들어, idx가 10이라면, "example.jpg"라는 원본 파일 이름이 반환됩니다.

// 글자를 잘라내서 원본 파일을 다운받도록 한다. 
function getImageLink(fileName) {
	var front = fileName.substr(0,12); // 앞에서 12글자까지 가져온다.	
	var end = fileName.substr(14); // 14번째 인덱스부터 끝까지 가져온다.
	return front+end; // 두 부분을 이어 붙여 반환
}
  1. 3번째 함수 하나 더...
function download(){
	// 주소사이에 s-는 빼고 
	var downloadImage = getImageLink("<%=bv.getFilename()%>");
	var downLink = "<%=request.getContextPath()%>/board/displayFile.aws?fileName="+downloadImage+"&down=1";
	return downLink;
}
  1. 4번째 함수 하나더...

  1. 첨부파일 쪽에 id 를 하나 넣어주고 주소값은 비워둔다. 제이쿼리를 이용해서 할 예정

	$("#dUrl").click(function(){
		$("a#dUrl").attr("href",download());
		return;
	});

제이쿼리 함수는 도큐멘트레디에다가 상단에 넣는다.

MediaUtils 파일에 이미지 파일 종류 추가해주기!! JPEG

profile
슬
이전 포스트

게시물 내용 나타내기

다음 포스트

조회하기, 추천하기

0개의 댓글