하려는 기능

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

javascript 코드

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에 넣는다.

java 코드

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으로 이미지 가져오면 된다.