MultipartFile

스프링에서 파일 업로드와 관련된 기능은 MultipartFile 객체를 사용한다.  이 객체를 통해 클라이언트가 업로드한 파일을 받아 서버에 저장할 수 있다. 서버에 저장된 파일 경로는 나중에 조회하거나 다운로드할 때 활용하면 된다.

import org.springframework.web.multipart.MultipartFile;

MultipartResolver 설정

스프링에서 multipart 요청을 처리하기 위해서는 MultipartResolver 빈이 설정 파일에 등록되어 있어야 한다. 

MultipartResolver는 클라이언트에서 전송된 multipart/form-data를 해석해 파일 데이터를 처리할 수 있도록 도와주는 스프링의 컴포넌트이다. 이를 통해 파일 업로드를 더 쉽게 처리할 수 있으며, MultipartFile과 같이 파일을 다루는 객체로 변환해 사용할 수 있다.

예시로 DispatcherServlet이 처리하는 파일 업로드 설정은 아래와 같다.

<bean class="org.springframework.web.multipart.support.StandardServletMultipartResolver" id="multipartResolver" />
</beans>

이 설정을 통해 스프링은 파일 업로드를 MultipartFile로 처리할 수 있다.

 

 

추가 Dependency 설정 (필요시)
혹시 파일 업로드 관련 기능이 제대로 동작하지 않는다면, pom.xml에 아래와 같은 의존성을 추가해야 할 수도 있다.

<dependency>
            <groupId>commons-fileupload</groupId>
           <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
         </dependency>

 

이 라이브러리는 Apache Commons FileUpload 라이브러리로, 파일 업로드 시 필요한 기능들을 제공한다.

예시 코드

BoardController.java

public class BoardController {
	@Autowired
	private BoardService boardService;
	@Autowired
	private ImageService imageService;
	private final String PATH="C:\\YN\\workspace03\\fileUpload_1023\\src\\main\\webapp\\images\\";

@RequestMapping(value="/updateBoard.do")
public String imageUpload(ImageDTO imageDTO) throws IllegalStateException, IOException {
    // MultipartFile 객체로 파일 받기
    MultipartFile file = imageDTO.getFile(); 
    // 업로드된 파일명 추출하기
    String fileName = file.getOriginalFilename(); 
    System.out.println("파일명 "+fileName);
    
    // 파일을 지정한 경로로 저장
    file.transferTo(new File(PATH + fileName));
    
    // 파일 경로를 DTO에 설정하고, DB에 저장
    imageDTO.setPath(fileName);
    imageService.insert(imageDTO);
    
    return "redirect:main.do"; // 업로드 후 메인 페이지로 
	}
}

 

위 코드를 보면, 파일을 MultipartFile로 받아 file.transferTo()를 통해 서버의 특정 경로에 저장한다.

이때 PATH 변수에 파일이 저장될 디렉토리를 지정해주면 된다.

파일이 정상적으로 업로드되면 그 파일 경로를 DB에 저장하고, 이후에는 redirect로 메인 페이지로 이동한다.

 

Board.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 상세 페이지</title>
<script src="js/preview.js"></script>
</head>
<body>
<!--  이 페이지 올 때에는, data와 path가 필요하다. -->

내용 ${data.content} <br>
작성자 ${data.writer} <br>

<hr>

<img id="defaultImage" alt="기본 이미지" src="images/default.jpg" style="display:${empty path ? 'block' : 'none'};">
<c:if test="${not empty path}">
    <img alt="비워두면 안됨" src="images/${path}" style="display:${not empty path ? 'block' : 'none'};">
</c:if>

<form action="updateBoard.do" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="bid" value="${data.bid}">
    이미지 <input type="file" name="file" onchange="preview(event)"> <br>
    <img id="previewImage" style="display:none;margin:5px;" alt="미리보기 이미지"><br>
    <input type="submit" value="이미지 변경">
</form>

<hr>

<a href="main.do">메인으로 이동</a>

</body>
</html>

 

위 JSP 페이지에서는 사용자가 파일을 업로드할 수 있도록 multipart/form-data로 설정된 폼을 사용했다.

파일 선택 시 자바스크립트 미리보기 기능을 통해 이미지를 바로 확인할 수 있게 했다.

미리보기는 아래 preview.js 파일에서 구현한 로직으로 처리된다.

 

preview.js

function preview(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    const imgPreview = document.getElementById('previewImage');
    const defaultImage = document.getElementById('defaultImage');
    
    reader.onload = function() {
        imgPreview.src = reader.result;
        imgPreview.style.display = 'block';
        defaultImage.style.display = 'none'; // 기본 이미지 숨기기
    };
    
    if (file) {
        reader.readAsDataURL(file);
    } else {
        imgPreview.style.display = 'none'; // 미리보기 이미지 숨기기
        defaultImage.style.display = 'block'; // 기본 이미지 보이기
    }
}

 

 

이 자바스크립트 코드는 파일이 선택되었을 때 미리보기 이미지를 보여주는 기능을 한다.

파일이 선택되면 FileReader 객체를 사용해 파일 내용을 읽고, 이미지 태그에 그 데이터를 적용해 미리보기를 제공한다.

 

이런 식으로 스프링에서 파일 업로드와 관련된 기능을 구현하면 된다.

MultipartFile로 파일을 처리하고, 필요한 경우 MultipartResolver 설정을 해주면 파일 업로드가 쉽게 구현된다.

필요한 경우 JavaScript를 통해 클라이언트 측에서 파일을 미리 확인할 수 있는 기능을 추가할 수 있다.

'Spring' 카테고리의 다른 글

[Spring] 횡단 로직 - AOP를 활용한 로그인 체크 기능 구현하기  (0) 2024.10.28
[Spring] 쿠키 활용하기 - 자동 로그인  (0) 2024.10.25
[Spring] 커스텀 어노테이션  (1) 2024.10.23
[Spring] AOP와 어노테이션  (0) 2024.10.16
[Spring] AOP 관점지향 프로그래밍  (1) 2024.10.15

티스토리툴바