STS3 쇼핑몰 프로젝트[24] 상품 이미지 업로드(파일 서버 전송) - 2

순서

1. 업로드 UI 추가 - FormData

2. 첨부 파일 서버 전송

3. URL 매핑 메서드

1. 업로드 UI 추가 - FormData

첨부 파일을 서버로 전송하기 위해선 FormData 객체를 사용해야 합니다.

FormData는 가상의 <form> 태그라고 생각하면 됩니다.

흔히 View에서 서버로 데이터를 전송하기 위해 <form> 태그를 사용했습니다. 화면 이동을 하면서 서버로 첨부 파일을 전송하는 것이라면 <form> 태그를 사용하면 됩니다.

하지만 상품 등록을 위해 화면의 이동 없이 첨부 파일을 서버로 전송해야 하기 때문에 FormData 객체를 생성하여 첨부 파일을 FormData에 저장하고 FormData 자체를 서버로 전송해야 합니다.

 

먼저 <input> 태그의 change 메서드 구현부에 FormData 객체를 인스턴스화 하여 변수에 저장합니다. (객체의 주소를 변수에 저장합니다.)

let formData = new FormData();

FormData 객체에 데이터를 추가하는 방법은 FormData.append(Key, Value) 메서드를 사용하는 것입니다. 추가할 데이터를 파라미터 Value에 작성하면 됩니다.

 

파라미터 Key의 경우 추가해줄 데이터의 변수를 작성합니다. <input> name과 Controller의 url 매핑 메서드의 매개 변수 이름을 동일하게 했듯이, Key와 추후 추가할 URL 매핑 메서드의 매개 변수 명도 동일해야 합니다.

 

기존 특정 Key가 있는 상태에서 동일한 Key로 데이터를 추가하면 기존 값을 덮어쓰지 않고 기존 값 집합의 끝에 새로운 값이 추가됩니다.(서버에선 배열 타입으로 데이터를 전달받습니다.)

 

사용자가 선택한 파일을 FormData에 "uploadFile"이란 이름(Key)으로 추가해주는 코드를 작성합니다.

formData.append("uploadFile", fileObj);

사용자가 한 개의 파일만 선택할 수 있도록 제한했기 때문에 한 개의 파일만 FormData 객체에 저장되도록 작성했습니다. 만약 여러 개의 파일을 선택할 수 있도록 한다면 아래와 같이 코드를 작성하면 됩니다.

for(let i = 0; i < fileList.length; i++){
	formData.append("uploadFile", fileList[i]);
}

2. 첨부 파일 서버 전송

서버로 전송할 첨부 파일이 준비됐습니다. 이번엔 준비된 데이터를 서버에 전송하는 코드를 작성합니다.

 

AJAX를 사용하여 서버로 데이터를 전송하는 아래의 코드를 추가합니다.

$.ajax({
	url : '/admin/uploadAjaxAction',
	processData : false,
	contentType : false,
	data : formData,
	type : 'POST',
	dataType : 'json'
});

주의할 점은 processData와 contentType의 속성 값을 false로 해주어야 첨부 파일이 서버로 전송된다는 것입니다.

AJAX 간단 속성 정리

url: 서버로 요청을 보낼 url

processData: 서버로 전송할 데이터를 queryString 형태로 변환할지에 대한 여부

contentType: 서버로 전송되는 데이터의 content-type

data: 서버로 전송할 데이터

type: 서버 요청 타입(GET, POST)

dataType: 서버로부터 반환받을 데이터 타입

3. URL 매핑 메서드

뷰에서 요청에 응답할 URL 매핑 메서드를 추가했습니다. AdminController.java에 "/admin/uploadajaxAction" URL요청에 응답을 하는 URL 매핑 메서드를 작성합니다.

/* 첨부 파일 업로드 */
@PostMapping("/uploadAjaxAction")
public void uploadAjaxActionPOST() {
	
	logger.info("uploadAjaxActionPOST..........");
		
}

뷰에서 전송한 첨부 파일 데이터를 전달받기 위해 MultipartFile 타입의 "uploadFile" 변수를 매개 변수로 부여했습니다.

/* 첨부 파일 업로드 */
@PostMapping("/uploadAjaxAction")
public void uploadAjaxActionPOST(MultipartFile uploadFile) {
	
	logger.info("uploadAjaxActionPOST..........");
		
}

MultipartFile은 뷰에서 전송한 multipart 타입의 파일을 다룰 수 있도록 해주는 인터페이스입니다. 해당 인터페이스의 메서드들은 파일의 이름 반환, 파일의 사이즈 반환, 해당 파일을 특정 경로에 저장하게 하는 등을 수행합니다.

 

위의 매개 변수 uploadFile은 오직 한 개의 파일만 전달받을 수 있습니다. 추후 여러 개의 파일을 업로드해야 하는 경우에는 해당 url 매핑 메서드를 사용할 수 없습니다.

 

따라서 업로드를 수행하는 url 매핑 메서드를 여러 개의 파일 업로드 처리도 할 수 있도록 선언한 매개 변수 uploadFile을 배열 타입으로 변경했습니다.

// 변경 전
public void uploadAjaxActionPOST(MultipartFile uploadFile)

// 변경 후
public void uploadAjaxActionPOST(MultipartFile[] uploadFile)