국비지원 77일차 (다중 파일 업로드)

@  지금 구현하는 SNS 개인프로젝트에서 단일 파일 업로드를 구현해 보았다. 근데 찾아보다가 다중 파일업로드 도 할수있는 것을 알게 되었고, 나중에 활용해 보고자 정리해 보았습니다.

 

※ 기능(다중 파일 업로드)

- 이미지 파일 여러개 업로드가능

- 이미지 파일 선택후 재 선택 시 이전에 선택했던 파일 지워지지 않고 누적해서 업로드가능

 

※  JS(다중 파일 업로드) 관련 코드

let uploadFiles = [];
let files = null;
function getImageFiles(e) {
    files = e.currentTarget.files;
 
    [...files].forEach(file => {
        uploadFiles.push(file);
    });

// 파일 누적 관리
    let w_input = document.querySelector('#w_input');
    if (uploadFiles.length > 0) {
        let dataTransfer = new DataTransfer();

        // 파일을 DataTransfer에 추가
        for (let i = 0; i < uploadFiles.length; i++) { dataTransfer.items.add(uploadFiles[i]); }

        // DataTransfer에서 FileList-like 객체 생성
        let uploader = dataTransfer.files;

        // 파일 입력 요소에 설정
        w_input.files = uploader;
    }
}

const realUpload = document.querySelector('#w_m_file_input');
realUpload.addEventListener('change', getImageFiles);

 

 

※  다중 파일 업로드 관련 (파일 누적관리 흐름)

 

- 실제 사용자가 업로드하는 input은 #w_m_file_input

- uploadFiles가 누적 파일을 관리하고 누적된 파일들을 #w_input이라는 input에 파일 정보들을 넣어놓는다.

- 그리고 form으로 controller에 가서 누적된 파일 정보를 가지고 있는 #w_input의 값을 가지고 코드를 돌리게 한다.

 

※  다중 파일 업로드 관련 (파일 누적관리 하는 방법)

- 파일 정보를 담을 dataTransfer를 생성한다.

     (원래 fileList를 사용하려고 했는데 인식이 안돼서 바꿨다.)

- 누적관리하고 있는 uploadFiles의 크기만큼 for문을 돌려 dataTransfer에 담는다.

- 변수를 만들어서 dataTransfer에 있는 file들의 데이터를 뽑아온다.

- controller에 보낼 input의 file에 넣는다.

 

※  다중 파일 업로드 관련 (Controller 코드)

private static final String F_PATH = "C:/Users/user/Desktop/img/";
public String updateQna(@RequestParam(value="wFile", required = false) List<MultipartFile> imgFiles){
   for(MultipartFile mf : imgFiles) {
       if (mf.getOriginalFilename().equals("")){ break; }
       String originalFileName = mf.getOriginalFilename();
       String safeFileName = System.currentTimeMillis() + originalFileName;
       String safeFile = F_PATH + safeFileName;
       try {
           mf.transferTo(new File(safeFile));
       } catch (Exception e) {
           e.printStackTrace();
       }
   }
}

 

 

※  다중 파일 업로드 관련 (파일 업로드 흐름)

- input에서 파일 정보 가져오기

- 해당 파일 로컬 (서버) 에 저장하기

 

※  다중 파일 업로드 관련 (파일 업로드 하는 방법)

- 위에 이미지 저장해 둘 path 주소를 정해둔다.

- @RequestPara(value="input [name]", required = false) List <MultipartFile> 변수명으로 매개변수를 받는다.

      (이것이 input파일에 들어있는 파일데이터 받는 변수다.)

      (List가 아닌 배열로 가져와도 된다.)

- forEach 돌려서. getOriginalFilename()을 써서 original파일명을 가져온다.

- 사용자들이 비슷한 시간에 이미지를 올리고 이미지명이 같을 수 있으니 이를 방지하기 위                         해 System.currentTimeMillis()       를  사용해 밀리 초까지 잡아서 시간데이터를 original파일명 앞에 붙인다.

- 처음에 설정해 놓은 저장해 둘 path 주소와 같이 붙여서. transferTo(new File(해당파일))을 사용해 로컬(서버)에 저장한       다.

- 추후에 저장 path와 밀리초+originalFilename으로 이미지 가져오면 된다.