파일 업로드

-- 파일 테이블 CREATE TABLE `file` ( `no` int NOT NULL AUTO_INCREMENT PRIMARY KEY, `id` varchar(64) DEFAULT NULL UNIQUE, `parent_table` varchar(100) NOT NULL, `parent_no` int NOT NULL, `name` text NOT NULL, `path` text NOT NULL, `size` bigint default NULL, `content_type` varchar(100) default 'application/octet-stream', -- image/png, application/pdf ... `sort_order` int default 0, `is_main` tinyint(1) default false, `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP, `updated_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP );

@Data public class Files { private Integer no; private String id; private String parentTable; // 부모 테이블 private Integer parentNo; // 부모 PK private String name; // 파일명 private String path; // 파일경로 private Long size; // 용량 private String contentType; // 컨텐츠 타입 private Integer sortOrder; // 순서 : 0~ private Boolean isMain; // 대표 여부 (썸네일) private Date createdAt; private Date updatedAt; public Files() { this.id = UUID.randomUUID().toString(); } }

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <!-- namespace="매퍼 인터페이스 경로" --> <mapper namespace="com.aloha.board.mapper.FileMapper"> <select id="list" resultType="Files"> SELECT * FROM file ORDER BY created_at DESC </select> <!-- 파일 조회 --> <select id="select" resultType="Files"> SELECT * FROM file WHERE no = #{no} </select> <select id="selectById" resultType="Files"> SELECT * FROM file WHERE id = #{id} </select> <!-- 파일 등록 --> <insert id="insert"> INSERT INTO file ( id, parent_table, parent_no, name, path, size, sort_order, is_main ) VALUES ( #{id}, #{parentTable}, #{parentNo}, #{name}, #{path}, #{size}, #{sortOrder}, #{isMain} ) </insert> <!-- 파일 수정 --> <update id="update"> UPDATE file <set> <if test="parentTable != null">parent_table = #{parentTable},</if> <if test="parentNo != null">parent_no = #{parentNo},</if> <if test="name != null">name = #{name},</if> <if test="path != null">path = #{path},</if> <if test="size != null">size = #{size},</if> <if test="contentType != null">content_type = #{contentType},</if> <if test="sortOrder != null">sort_order = #{sortOrder},</if> <if test="isMain != null">is_main = #{isMain},</if> </set> WHERE no = #{no} </update> <update id="updateById"> UPDATE file <set> <if test="parentTable != null">parent_table = #{parentTable},</if> <if test="parentNo != null">parent_no = #{parentNo},</if> <if test="name != null">name = #{name},</if> <if test="path != null">path = #{path},</if> <if test="size != null">size = #{size},</if> <if test="contentType != null">content_type = #{contentType},</if> <if test="sortOrder != null">sort_order = #{sortOrder},</if> <if test="isMain != null">is_main = #{isMain},</if> </set> WHERE id = #{id} </update> <!-- 파일 삭제 --> <delete id="delete"> DELETE FROM file WHERE no = #{no} </delete> <delete id="deleteById"> DELETE FROM file WHERE id = #{id} </delete> </mapper>

@Mapper public interface FileMapper { // 파일 목록 List<Files> list() throws Exception; // 파일 조회 Files select(Integer no) throws Exception; Files selectById(String id) throws Exception; // 파일 등록 int insert(Files board) throws Exception; // 파일 수정 int update(Files board) throws Exception; int updateById(Files board) throws Exception; // 파일 삭제 int delete(Integer no) throws Exception; int deleteById(String id) throws Exception; }

public interface FileService { // 파일 목록 List<Files> list() throws Exception; // 파일 조회 Files select(Integer no) throws Exception; Files selectById(String id) throws Exception; // 파일 등록 boolean insert(Files board) throws Exception; // 파일 수정 boolean update(Files board) throws Exception; boolean updateById(Files board) throws Exception; // 파일 삭제 boolean delete(Integer no) throws Exception; boolean deleteById(String id) throws Exception; // ⭐ 파일 업로드 int upload(List<MultipartFile> files, ParentTable parentTable, Integer parentNo) throws Exception; }

@Slf4j @Service @RequiredArgsConstructor public class FileServiceImpl implements FileService { private final FileMapper fileMapper; @Value("${spring.servlet.multipart.location}") private String uploadPath; @Override public List<Files> list() throws Exception { List<Files> files = fileMapper.list(); return files; } @Override public Files select(Integer no) throws Exception { Files file = fileMapper.select(no); return file; } @Override public Files selectById(String id) throws Exception { Files file = fileMapper.selectById(id); return file; } @Override public boolean insert(Files board) throws Exception { int result = fileMapper.insert(board); return result > 0; } @Override public boolean update(Files board) throws Exception { int result = fileMapper.update(board); return result > 0; } @Override public boolean updateById(Files board) throws Exception { int result = fileMapper.updateById(board); return result > 0; } @Override public boolean delete(Integer no) throws Exception { int result = fileMapper.delete(no); return result > 0; } @Override public boolean deleteById(String id) throws Exception { int result = fileMapper.deleteById(id); return result > 0; } @Override public int upload(List<MultipartFile> files, ParentTable parentTable, Integer parentNo) throws Exception { int sortOrder = 0; if( files != null ) { for (MultipartFile file : files) { String fileName = file.getOriginalFilename(); // 원본파일명 String path = uploadPath + UUID.randomUUID().toString() + "_" + fileName; // 파일 저장 File realFile = new File(path); byte[] fileData = file.getBytes(); FileCopyUtils.copy(fileData, realFile); // DB 저장 Files newFile = new Files(); newFile.setParentNo(parentNo); newFile.setParentTable(parentTable.value()); newFile.setName(fileName); newFile.setPath(path); newFile.setContentType(file.getContentType()); newFile.setSortOrder(sortOrder++); if( sortOrder == 1 ) newFile.setIsMain(true); fileMapper.insert(newFile); } } return sortOrder; } }

@Data public class Board { private Integer no; private String id; private String title; private String writer; private String content; private Date createdAt; private Date updatedAt; // 업로드 파일 목록 ⚡ private List<MultipartFile> files; public Board() { this.id = UUID.randomUUID().toString(); } }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>게시판 프로젝트</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="/css/style.css"> </head> <body> <main> <div class="container py-5"> <div class="row justify-content-center"> <div class="col-12 col-md-10 col-lg-6"> <h1 class="text-center">게시글 등록</h1> <form action="/board/create" method="post" enctype="multipart/form-data"> <div class="mb-3"> <label for="" class="form-label">제목</label> <input type="text" class="form-control" name="title" id="title" aria-describedby="helpTitle" placeholder="제목을 입력해주세요" required /> <small id="helpTitle" class="form-text text-muted">제목을 입력해주세요</small> </div> <div class="mb-3"> <label for="" class="form-label">작성자</label> <input type="text" class="form-control" name="writer" id="writer" aria-describedby="helpWriter" placeholder="작성자를 입력해주세요" required /> <small id="helpWriter" class="form-text text-muted">작성자를 입력해주세요</small> </div> <div class="mb-3"> <label for="" class="form-label">내용</label> <textarea class="form-control" name="content" id="content" rows="5"></textarea> </div> <div class="mb-3"> <label for="" class="form-label">첨부파일</label> <input type="file" class="form-control" name="files" id="file" multiple /> </div> <div class="d-grid gap-2"> <button type="submit" class="btn btn-primary">등록</button> </div> </form> </div> </div> </div> </main> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.5.3/css/fileinput.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.5.3/js/fileinput.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.5.3/themes/fas/theme.min.js"></script> <script src="/js/locales/kr.js"></script>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>게시판 프로젝트</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="/css/style.css"> </head> <body> <main> <div class="container py-5"> <div class="row justify-content-center"> <div class="col-12 col-md-10 col-lg-6"> <h1 class="text-center">게시글 등록</h1> <form action="/board/create" method="post" enctype="multipart/form-data"> <div class="mb-3"> <label for="" class="form-label">제목</label> <input type="text" class="form-control" name="title" id="title" aria-describedby="helpTitle" placeholder="제목을 입력해주세요" required /> <small id="helpTitle" class="form-text text-muted">제목을 입력해주세요</small> </div> <div class="mb-3"> <label for="" class="form-label">작성자</label> <input type="text" class="form-control" name="writer" id="writer" aria-describedby="helpWriter" placeholder="작성자를 입력해주세요" required /> <small id="helpWriter" class="form-text text-muted">작성자를 입력해주세요</small> </div> <div class="mb-3"> <label for="" class="form-label">내용</label> <textarea class="form-control" name="content" id="content" rows="5"></textarea> </div> <div class="mb-3"> <label for="" class="form-label">첨부파일</label> <input type="file" class="form-control" name="files" id="file" multiple /> </div> <div class="d-grid gap-2"> <button type="submit" class="btn btn-primary">등록</button> </div> </form> </div> </div> </div> </main> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> </body> </html>