Spring3 MVC와 Mybatis를 이용하여 이미지를 blob타입으로 db 저장 및 출력해보기

이번포스팅은 이미지 파일을 통째로 DB의 BLOB형식의 컬럼에 등록을 해보는 방법과 

DB에 저장된 BLOB 형식의 데이터를 이미지태그에 출력해보도록 하겠습니다.

우선 BLOB 컬럼을 가진 테스트 테이블 하나를 생성해보도록 하겠습니다.

※ 본인은 MySQL에 BLOB타입의 컬럼을 가진 테이블을 생성해보도록 하겠습니다.

BLOB컬럼을 가진 테이블 생성

CREATE TABLE `img_table` (
  `img` longblob
) ENGINE=InnoDB DEFAULT CHARSET=utf8

BLOB 형식으로 생성 할수도 있지만 

사이즈제한이 있으므로 LONGBLOB 타입의 컬럼을 생성하였습니다.

이제는 Spring MVC와 Mybatis의 로직을 구현해보도록 하겠습니다.

Spring 및 Mybatis연동법은 개인이 사용하고 계신 연동법이 있으시면 상관없지만

 없으신 분들은 하단 포스팅을 참고하시면 되겠습니다.

2014/11/06 - [개발에필요한연동법/스프링연동] - STS 이클립스를 이용하여 UTF-8 인코딩 설정 및 Spring3 MVC 연동해보기

2014/11/06 - [개발에필요한연동법/스프링연동] - Spring3 한글깨짐 방지를 위한 UTF-8 인코딩 설정하기

2014/11/07 - [개발에필요한연동법/스프링연동] - Spring3 파일전송을 위한 multipartResolver 설정하기

2014/11/14 - [개발에필요한연동법/스프링연동] - Spring3 Maven을 이용하여 pom.xml에 oracle,mysql,mssql jdbc 라이브러리 등록하기

2014/11/14 - [개발에필요한연동법/스프링연동] - Spring3 + MyBatis 기본설정 + 연동테스트 후 쿼리로그 확인해보기

DB에 파일을 BLOB로 등록하기 위한 Contoller

@Autowired
private StudyDao dao;
	
/**
 * 파일태그를 위한 폼태그
 * @return
 */
@RequestMapping(value="/formFile")
public String formFile() {
	return "formFile";
}

/**
 * 파일처리 컨트롤러
 * @param vo
 * @return
 */
@RequestMapping(value="/saveImage")
public String saveImage(Vo vo) {
	try {
		Map<String, Object> hmap = new HashMap<String, Object>();
		hmap.put("img", vo.getImgFile().getBytes());
		dao.saveImage(hmap);	
	} catch (Exception e) {
		e.printStackTrace();
	}
	return "redirect:/formFile";
}

DB에 파일을 BLOB로 등록하기 위한 DAO

@Autowired
private SqlSession query;

public void saveImage(Map<String, Object> hmap) throws SQLException {
	query.insert("query.saveImage",hmap);
}

Mybatis INSERT 쿼리코드

<insert id="saveImage" parameterType="java.util.Map">
	INSERT INTO img_table VALUES(#{img})	
</insert>

MultipartFile을 받기위한 VO 클래스

public class Vo {
	private MultipartFile imgFile;

	public MultipartFile getImgFile() {
		return imgFile;
	}

	public void setImgFile(MultipartFile imgFile) {
		this.imgFile = imgFile;
	}
}

DB에 저장할 파일처리를 위한 뷰페이지(formFile.jsp)

<form action="/saveImage" enctype="multipart/form-data" method="post">
	<input type="file" name="imgFile" />
	<input type="submit" value="이미지저장"/>
</form>

실행결과는 다음과 같습니다.

저장결과 정상적으로 이미지바이트가 DB에 INSERT 되었습니다.

그렇다면 이제 저장된 바이트이미지를 SELECT문을 통하여 가져온 후 

IMG태그로 화면에 출력해보도록 하겠습니다.

IMG태그의 SRC는 바이트이미지를 DB로부터 SELECT하는 Controller

/**
 * 임의의 뷰페이지
 * @return
 */
@RequestMapping(value="/view")
public String view() {
	return "view";
}
	
/**
 * 이미지태그의 src 컨트롤러
 * @return
 */
@RequestMapping(value="/getByteImage")
public ResponseEntity<byte[]> getByteImage() {
	Map<String, Object> map = dao.getByteImage();
       byte[] imageContent = (byte[]) map.get("img");
       final HttpHeaders headers = new HttpHeaders();
       headers.setContentType(MediaType.IMAGE_PNG);
       return new ResponseEntity<byte[]>(imageContent, headers, HttpStatus.OK);
}

IMG태그의 SRC는 바이트이미지를 DB로부터 SELECT하는 DAO

public Map<String, Object> getByteImage() {
	return query.selectOne("query.getByteImage");
}

IMG태그의 SRC는 바이트이미지를 DB로부터 SELECT하는 Mybatis 쿼리XML

<select id="getByteImage" resultType="java.util.Map">
	SELECT img
	FROM img_table
</select>

임의의 뷰페이지(view.jsp) 

<!-- img태그의 src 경로는 byte이미지 가져오는 컨트롤러 호출(/getByteImage) -->
<img alt="" src="/getByteImage" />

위와같이 임의로 body태그내에 작성 후 /view 컨트롤러를 호출해보도록 하겠습니다.

호출결과 정상적으로 byte데이터를 DB로부터 가져와서 화면에 출력이 되었습니다.

필요하신분들이 계실거 같아 포스팅 해보았습니다 ^^

by 개발로짜