Spring | File Upload

File Upload

다중 파일을 선택하여 업로드하는 기능 구현

 

중요 기능

- 업로드

- 업로드 경로

- 업로드 저장

 

세부 기능

- 업로드 진행바

- 업로드 파일 형식 제한(검증)

- 업로드 미리보기

- 업로드된 파일 다운로드

 

기술스텍

Java, Spring, JavaScript, JQuery, Ajax, HTML

Apache Tomcat v9.0

 

업로드 | 화면

화면에서 업로드할 파일을 구성하고 서버에서 받을 파일 형식을 설정해 지정된 경로로 저장

 

multiple: 파일 선택시 다중 파일을 선택할 수 있다.
accept: 파일 확장자를 지정해서 원하는 확장자만 보이게 한다.

<input type="file" id="uploadFiles" multiple accept="image/*, video/*"/>

 

FormData: Ajax로 폼 전송을 가능하게 하게 함
 - JSON 구조로 "KEY-VALUE" (키와 값) 구조로 데이터를 전송
 - 페이지 전환 없이 폼 데이터를 제출 하고 싶을 때
Ajax: 서버로 저장할 url, type, data, xhr 을 입력

function uploadFile() {
    var files = document.getElementById('uploadFiles').files;
    var fd = new FormData();
    fd.append('file', files);

    $.ajax({
        url: '/upload',
        data: fd,
        type: 'post',
        contentType: false,
        processData: false,
        xhr: function () {  //XMLHttpRequest 재정의 가능
        	// 프로그레스바
        },
        success: function (ret) { // 성공
        },
        error: function (e) { // 에러
        }
    });
}

 

업로드 | Controller

화면에서 받을 데이터를 지정된 경로에 저장할 로직 구성

 

@RequestMapping: 매핑할 주소
UploadFileVO: 다중 파일을 다룰 형태(Key, Value)
MultipartFile: 다중 파일의 다루는 인터페이스

@RequestMapping("/upload")
public UploadFileVO uploadMultipleFileHandler(
            HttpServletRequest request,
            List<MultipartFile> files) {
            
        // UploadFileVO 전달받을 데이터를 다룰 형태(Key, Value)
        // HttpServletRequest 요청
        // MultipartFile 인터페이스를 사용해서 List 형태로 받기
}

 

업로드 | 저장 경로

다중 파일을 저장할 경로 구성

 

UPLOAD_PATH: 저장할 상위 폴더 경로
서블릿의 기본 내장객체 request와 session을 사용하여 구동 중인 서버의 절대경로 지정
- getSession(): 현재 세션이 존재하면 기존 세션을 가져옴
- getServletContext(): 서블릿 컨테이너와 통신하기 위한 사용 메서드들의 클래스
- getRealPath(): 서블릿의 가상디렉토리상의 실제 경로를 얻음

private static final String UPLOAD_PATH = "resources"; // path

String applicationPath = request.getSession().getServletContext().getRealPath("");
String uploadFilePath = applicationPath + UPLOAD_PATH;

 

저장할 경로 상위 폴더가 없을 경우 생성

File uploadsPath = new File(uploadFilePath);
// 업로드 폴더 생성(존재하지 않는 경우)
if (!uploadsPath.exists()) { // 검증
    uploadsPath.mkdir(); // uploadFilePath 경로의 폴더 생성
}

 

업로드 | 저장

FileOutputStream: 기존의 파일이 없으면 만들어지고 있으면 덮어쓰게 되어 기존 파일내용이 지워짐
BufferedOutputStream: byte단위로 파일을 기록 할때 사용하는 버퍼 스트림

if (originalFileName != null) { // 파일 이름 유무 검증
    // 파일 저장(저장 폴더 경로 + OS타입 형태변환(File.separator) + 파일 이름)
    File serverFile = new File(uploadFilePath + File.separator + savedFileName);
    // FileOutputStream : 기존의 파일이 없으면 만들어지고 있으면 덮어쓰게 되어 기존 파일내용이 지워짐
    // BufferedOutputStream : byte단위로 파일을 기록 할때 사용하는 버퍼 스트림
    BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
    // 문자열을 바이트배열로 변환해서 파일에 저장한다.
    stream.write(bytes);
    // 사용이 끝나면 파일 스트림 닫기
    stream.close();
}

 

---

 

업로드 | Progress(프로그레스)

브라우저 내장 객체 XMLHttpRequest 를 이용한 프로그레스 사용

 

HTML 의 요소 중 하나로 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태로 사용함

<progress id="progressBar" value="0" max="100" style="width:100%"></progress>

 

Ajax 통신을 사용해서 업로드 진행상황을 프로그레스를 통해 표시

// 출처 | https://coderwall.com/p/je3uww/get-progress-of-an-ajax-request
$.ajax({
    url: path,
    type: 'post',
    data: {payload: payload},
    xhr: function () {
        var xhr = $.ajaxSettings.xhr();
        xhr.onprogress = function e() {
            // For downloads
            if (e.lengthComputable) {
                console.log(e.loaded / e.total);
            }
        };
        xhr.upload.onprogress = function (e) {
            // For uploads
            if (e.lengthComputable) {
                var percent = e.loaded * 100 / e.total;
                setProgress(percent); // progress input val
            }
        };
        return xhr;
    }
}).done(function (e) {
    // Do something
}).fail(function (e) {
    // Do something
});

// progress 태그 값 입력
var $progressBar = $("#progressBar");
function setProgress(per) {
	$progressBar.val(per);
}

 

업로드 | 파일 업로드 검증

파일 수와 파일의 확장자 등의 검증 처리

 

파일 수 검증
파일 확장자 검증

const uploadFiles = document.getElementById('uploadFiles');

// addEventListener를 사용해서 반응 후 실행
uploadFiles.addEventListener('change', updateImageDisplay);

function updateImageDisplay() {
    // 파일 정보
    const curFiles = uploadFiles.files;
    
    if (curFiles.length === 0) { // 파일이 없으면 안내 메세지 전달
        const para = document.createElement('p');
        para.textContent = '선택된 파일이 없습니다.';
        return uploadFilePreview.appendChild(para);
    }
    
    // 파일 확장자 검증
    validFileType(file);
}

// 파일 타입 항목
const fileTypes = [
    'image/apng',
    'image/bmp',
    'image/gif',
    'image/jpeg',
    'image/pjpeg',
    'image/png',
    'image/svg+xml',
    'image/tiff',
    'image/webp',
    'video/mp4',
];

// 파일 타입 검사
function validFileType(file) {
    return fileTypes.includes(file.type);
}

 

---

 

잼밌다.