파일첨부_다중파일 첨부 및 마무리

board2save.html

• input태그에 multiple 속성을 추가한다.
• multiple은 여러 개 파일을 올릴 수 있도록 해준다.

file: <input type="file" name="boardFile" multiple> <br>

 

board2DTO

MultipartFile이었던 타입을 LIst로 변경하여 여러 파일을 담을 수 있도록 한다.

private List<MultipartFile> boardFile; // save.html -> Controller 파일 담는 용도

 

board2Service

• 부모 데이터가 먼저 저장이 되야하므로 작성했던 코드에서 아래코드부분을 위로 옮긴다.

Board2Entity board2Entity = Board2Entity.toSaveFileEntity(boardDTO);
Long saveId = board2Repository.save(board2Entity).getId();
Board2Entity board2 = board2Repository.findById(saveId).get();

• for(MultipartFile boardFile: boardDTO.getBoardFile()){ 에서 boardDTO.getBoardFile()이 List 타입이기 때문에 for문을 통해 반복해서 넣어준다.

Board2Entity board2Entity = Board2Entity.toSaveFileEntity(boardDTO);
Long saveId = board2Repository.save(board2Entity).getId();
Board2Entity board2 = board2Repository.findById(saveId).get();

for(MultipartFile boardFile: boardDTO.getBoardFile()){
    // MultipartFile boardFile = boardDTO.getBoardFile(); // 1
    String originalFilename = boardFile.getOriginalFilename();// 2
    String storedFileName = System.currentTimeMillis() + "_" + originalFilename; // 3
    String savePath = System.getProperty("user.dir")+"/src/main/resources/static/files/"+storedFileName; // 4
    boardFile.transferTo(new File(savePath)); // 5    

    BoardFileEntity boardFileEntity = BoardFileEntity.toBoardFileEntity(board2, originalFilename, storedFileName);
    boardFileRepositoy.save(boardFileEntity);
}

 

board2DTO

• 여러 개의 파일을 가져오므로 boardFile, originalFileName, storedFileName을 List로 가져올 수 있도록 한다.

private List<MultipartFile> boardFile; // save.html -> Controller 파일 담는 용도
private List<String> originalFileName; // 원본 파일 이름
private List<String> storedFileName; // 서버 저장용 파일 이름

• 여러개의 파일의 원본과 저장이름도 Controller에도 List문을 for문으로 돌려서 setter해줘야한다.

}else{
    List<String> orginalFileNameList = new ArrayList<>();
    List<String> storedFileNameList = new ArrayList<>();
    board2DTO.setFileAttached(board2Entity.getFileAttached());
    // 파일 하나만 가져올 때
    /*
        board2DTO.setOriginalFileName(board2Entity.getBoardFileEntityList().get(0).getOriginalFileName());
        board2DTO.setStoredFileName(board2Entity.getBoardFileEntityList().get(0).getStoredFileName());
    */

    // 파일 여러개 가져올 때

    for(BoardFileEntity boardFileEntity: board2Entity.getBoardFileEntityList()){
        orginalFileNameList.add(boardFileEntity.getOriginalFileName());
        storedFileNameList.add(boardFileEntity.getStoredFileName());
    }
    board2DTO.setOriginalFileName(orginalFileNameList);
    board2DTO.setStoredFileName(storedFileNameList);

}

 

board2detail.html

이미지 파일도 여러개이기때문에 td태그에 반복문을 돌려서 보이도록 한다.

<tr th:if="${board.fileAttached == 1}">
    <th>image</th>
    <!-- 파일 하나 일 경우-->
<!--        <td>-->
<!--            <img th:src="@{|/upload/${board.storedFileName}|}" alt="">-->
<!--            <img th:src="|/files/${board.storedFileName}|" alt="" width="100%" height="auto">-->
<!--        </td>-->

    <!-- 파일이 여러 개일 경우 -->
    <td th:each="fileName: ${board.storedFileName}">
        <img th:src="|/files/${fileName}|" alt="" width="100%" height="auto">
    </td>
</tr>