$$config title: [ Spring ] 다중파일 업로드(내부저장) keywords: - 파일추가 $$ # 다중이미지 업로드 : 새로운 테이블을 만들어 ManyToOne, OneToMany로 연결 # 코드 및 설명 ## [ DB ] ```sql CREATE TABLE files( id BIGINT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, `filename` TEXT, question_id BIGINT UNSIGNED NOT NULL ); ``` 하나의 테이블에 파일관련 칼럼을 만들면 단일업로드만 가능, 테이블을 새로 만들어 연결을 시켜줘야함 ## [ domain ] ### Files ```java @Getter @Setter @Entity public class Files { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String filename; @ManyToOne private Question question; } ``` getter, setter, entity 사용 ManyToOne을 통해 files에 있는 내용을 하나로 압축하여 question으로 보내준다. ### Question ```java . @OneToMany(mappedBy = "question", cascade = CascadeType.REMOVE) private List fileList; ``` OneToMany를 통해 압축되어 온 Files을 하나의 칼럼으로 본다. - Controller나 HTML에서 getFiles.~ / question.filesList 형식으로 사용할수 있다. ## [ Controller ] ### Files ```java @Controller @RequiredArgsConstructor public class FilesController { private final FilesService filesService; private final QuestionService questionService; @PostMapping("/multi-file") public String multiFileUpload( @RequestParam("multiFile") List multiFileList, QuestionForm questionForm )throws InterruptedException{ try{ filesService.upload(questionForm, multiFileList); }catch(Exception e){ questionService.create(questionForm.getContent()); } return "redirect:/question/list"; } } ``` |설명| |--| |다중파일을 업로드하기 위한 Controller| |RequestParam을 이용하여 MultipartFile이라는 파일을 multiFile이라는 이름으로 가져온다.| |위와 같이 가져온 multiFile과 화면에서 받아온 questionForm을 try catch문을 이용해 upload 메서드에 넘겨준다.| |multiFile - 업로드한 파일이 들어감| |try catch - 맨 처음에 upload 메서드를 실행시킴으로써 내부폴더에 사진을 저장하고 글을 생성한다. | |try catch - 파일없이 내용만 있는경우 catch에 있는 create를 통해 글을 생성한다. | |return - 게시물 메인페이지로 이동| ## [ Service ] ### upload ```java @Service @RequiredArgsConstructor public class FilesService { private final FilesRepository filesRepository; private final QuestionService questionService; 1. @Async public void upload(QuestionForm questionForm, List multiFileList){ 2. String root = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\uploadFiles"; 3. File fileCheck = new File(root); 4. if (!fileCheck.exists()) fileCheck.mkdirs(); /* * 1) exists : 특정 폴더 및 파일이 존재하는지 확인합니다 * 2) mkdirs : 만들고자 하는 디렉토리의 상위 디렉토리가 존재하지 않을 경우, 상위 디렉토리까지 생성합니다 */ List> fileList = new ArrayList<>(); for(int i = 0; i < multiFileList.size(); i++){ 5. String originFile = multiFileList.get(i).getOriginalFilename(); 6. String ext = originFile.substring(originFile.lastIndexOf(".")); 7. String changeFile = UUID.randomUUID().toString() + ext; 8. Map map = new HashMap<>(); map.put("originFile", originFile); map.put("changeFile", changeFile); fileList.add(map); } 9. try{ for(int i = 0; i < multiFileList.size(); i++){ File uploadFile = new File(root + "\\" + fileList.get(i).get("changeFile")); multiFileList.get(i).transferTo(uploadFile); } uploadDB(fileList, questionForm); System.out.println("다중 파일 업로드 성공!"); }catch(IllegalStateException | IOException e){ System.out.println("다중 파일 업로드 실패 ㅠㅠ"); for(int i = 0; i < multiFileList.size(); i++){ new File(root + "\\" + fileList.get(i).get("changeFile")).delete(); } e.printStackTrace(); } } } ``` |No|설명| |--|--| |1|Async - 비동기 서비스 만들기^{일처리시 따로 빼논 뒤 기존것과 분리된것의 일을 동시에 처리O - 많은 용량 처리시 효율적}| |2|사진을 저장할 경로를 root라는 변수에 저장| |3|new File(URI uri) - 파일 경로를 객체로 생성한 URI 객체를 기준으로 File 객체 생성| |4| 사진을 담을 경로에 디렉토리가 존재하지 않으면 디렉토리 생성 | |5| multiFileList에 있는 i번째 파일의 이름을 가져온다.| |6|file에서 확장자를 따로 잘라 보관| |7|랜덤 UUID와 앞에서 자른 확장자를 붙여 보관| |8|원래 이름을 8번까지의 과정을 통해 나온 새로운 이름으로 변경한다| |9|앞서 설정한 경로에 파일저장 후 파일업로드 만약 업로드 실패시 저장되어 있던 파일 삭제 진행| ### uploadDB ```java private void uploadDB(List> fileList, QuestionForm questionForm) { Question question = questionService.create(questionForm.getContent()); for(Map file : fileList){ Files files = new Files(); files.setFilename(file.get("changeFile")); files.setQuestion(question); filesRepository.save(files); } } ``` |설명| |--| |내용 생성 후 for문으로 파일 저장| ## [ HTML ] ### form ```html . . . ``` ### story ```html

```