STS3 쇼핑몰 프로젝트[24] 상품 이미지 업로드(준비 작업)

순서

1. 전체적 방향

2. 라이브러리 추가

3. web.xml

4. multipartResolver 등록

1. 전체적 방향

 '상품 등록 페이지'에서 사용자가 이미지를 선택을 하고 다른 상품 정보를 다 작성한 뒤 '등록 버튼'을 눌렀을 때 상품 이미지를 업로드하고, 업로드 이미지 정보를 DB 저장을 하는 방식으로 구현했습니다.

 

해당 방식으로 했을 때 동작 방식은 다음과 같습니다.

(뷰) 사용자가 이미지를 선택 => (뷰) 선택된 이미지 서버로 전송 => (서버) 전송받은 이미지 저장 후, 저장 한 이미지 정보 뷰로 재전송 =>  (뷰) 전송받은 데이터를 활용하여 이미지 미리 보기, <input> 태그에 데이터 저장 => (뷰) '등록 버튼' 클릭 => (서버) 이미지 정보 DB 저장

서버에서 첨부 파일을 처리하기 위해서 'cos.jar', 'commons-fileupload', 'servlet' 등이 있는데 이 중 'servlet' 라이브러리를 활용하여 구현했습니다.

 

※ 단, servlet의 모든 버전이 첨부파일을 처리 할 수 있는 라이브러리는 아니고, 3.0 이상부터 가능합니다.

 

추가적으로 페이지의 이동없이 데이터를 서버에 전송하고 반환받아 그 데이터를 사용하기 위해서 AJAX를 사용했습니다.

2. 라이브러리 추가

스프링 MVC 프로젝트는 servlet 라이브러리를 기본적으로 사용하고 있습니다.

단지 기존 라이브러리 버전을 3.0이상으로 변경해주면 됩니다.

3. web.xml 설정

web에 대한 설정은 web.xml 아니면 웹 관련 Java 클래스를 따로 만들어서 설정해야 합니다.

 

저는 web.xml을 사용하고 있기 때문에 web.xml에서 업로드를 사용하기 위한 기본적인 설정을 추가했습니다.

// 참고한 블로그
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
	version="3.1">

// 내 코드
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

제가 참고한 블로그에선 web.xml 상단 xml의 네임스페이스를 3.1 버전으로 변경했는데, 이렇게 하면 제 프로젝트에선 버전 문제로 에러가 나서 전 그대로 진행했습니다.

 

아래의 multipart-config 설정 코드를 web.xml의 <servlet>태그 내부에 삽입해준 후 저장합니다.

<!-- 업로드 관련 설정 -->
		<multipart-config>
			<!-- location: 업로드한 파일이 임시로 저장되는 경로 -->
			<location>C:\\upload\\temp</location>		
			<max-file-size>20971520</max-file-size>					<!-- 1MB * 20 -->
			<max-request-size>41943040</max-request-size>			<!-- 40MB -->
			<!-- file-size-threshold: 임시 파일로 저장 여부를 결정할 데이터 크기입니다. 설정된 값을 넘지 않는다면 업로드된 데이터는 메모리상에 유지하고, 설정된 값을 초과 한다면 <location>에 설정된 경로에 임시파일로 저장 -->											
			<file-size-threshold>20971520</file-size-threshold>		<!-- 20MB -->
		</multipart-config>

웹 클라이언트와 웹 서버간에 데이터를 주고받을 때 해당 데이터의 인코딩 되는 방식을 enctype이라고 합니다. 

흔히 사용하는 <form> 태그에 속성으로 추가하여 속성값을 지정해줄 수 있습니다.

enctype의 속상 값으로는 'application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain' 이 있습니다.

 

보통 <form>태그에 데이터를 저장하여 서버로 전송할 때는 기본값인 'application/x-www-form-urlencoded'이 사용됩니다. 하지만 파일과 같은 데이터를 주고받기 위해서는 enctype 속성 값이 'multipart/form-data'이어야 합니다.

 

 <multipart-config>는 'multipart/form-data' 타입의 데이터를 주고받을 때의 설정(configuration)을 위한 태그입니다.

 

아래의 목록은 각 태그가 어떠한 설정인지에 대한 설명입니다. (설정값으로 사용된 숫자들의 단위는 byte입니다.)

 

 <location> :  업로드한 파일이 임시로 저장되는 경로입니다.

 <max-file-size> : 업로드가 가능한 최대 파일 크기입니다. 

 <max-request-size> : 업로드되는 파일의 최대 크기입니다.

 <file-size-threshold> : 임시 파일로 저장 여부를 결정할 데이터 크기입니다. 설정된 값을 넘지 않는다면 업로드된 데이터는 메모리상에 유지하고, 설정된 값을 초과한다면 <location>에 설정된 경로에 임시 파일로 저장을 합니다.

4. multipartResolver 등록

앞서 작업한 설정은 WAS(Web Application Servce / Tomcat)에 대한 설정입니다.

 

위의 설정만 하였을 경우, 뷰(클라이언트)로 전송한 multipart 데이터를 전달을 받는 것 까지는 문제가 없지만 스프링에서 해당 multipart 데이터를 처리할 수 없습니다.

 

스프링에서 multipart 데이터를 처리하기 위해서는 MultipartResolver 클래스를 bean으로 등록해주는 설정이 필요로 합니다. (MultipartResolver는 파일 업로드 처리를 위해 스프링 프레임워크에서 제공하는 CommonsMultipartResolver,  StandardServletMultipartResolver의 구현체입니다.)

 

웹과 관련된 설정이기 때문에 servlet-context.xml 파일에 MultipartResolver 클래스를 bean으로 등록해줍니다.

 

아래의 코드를 servlet-context.xml에 작성합니다.

<!-- 업로드 관련 빈 -->
<!-- 웹과 관련된 설정이기 때문에 servlet-context.xml 파일에 MultipartResolver 클래스를 bean으로 등록 -->
<beans:bean id="multipartResolver" class="org.springframework.web.multipart.support.StandardServletMultipartResolver"></beans:bean>