파일 업로드 위치 변경
파일을 시스템 경로로 하는 경우 ssh등 파일 서버자체를 구성해서 접속해야한다. AWS S3와 같은 파일서버구성이 필요하기 때문에 프로젝트는 간단하게 구성하기 위해 프로젝트 내부경로에 파일을 업로드하고, 파일을 간단하게 불러오게 하고자한다.
# File Directory
file.upload-dir=/Users/inyongkim/Documents/iLanD/src/main/resources/static/uploads/
Java
복사
이를통해 파일업로드관련 CRUD가 작동하면 해당 부분에 파일이 업로드 또는 삭제가 실시간으로 진행된다.
미리보기
파일을 업로드한 공지글과 같은 글에서 파일(이미지)가 정상 로드되는지 확인하고자했다.
// Ajax를 이용해 공지글 내용 가져오기
$.ajax({
url: `/api/boards/notice/${noticeIdField.val()}`,
success: function (notice) {
const fileList = notice.fileList;
// 파일 리스트에서 마지막 파일의 파일명 가져오기
const originFileName = fileList.length > 0 ? fileList[fileList.length - 1].fileName : '';
const lastFileName = fileList.length > 0 ? fileList[fileList.length - 1].fileName.replace(/^[^_]+_/, '') : '';
// 가져온 공지글 정보를 화면에 표시
contentElement.html(`
<div>
<div style="padding: 10px">👤 작성자 : ${notice.noticeWriter}</div>
${fileList.length > 0 ? `<div style="padding: 10px">📎 첨부파일 : ${lastFileName}</div>` : ''}
</div>
${fileList.length > 0 ? `<div style="padding: 10px">미리보기: <img src="/uploads/${originFileName}" alt="첨부 이미지" style="max-width: 200px; max-height: 200px;"></div>` : ''}
...
}
Java
복사
ajax를 통해 공지 목록을 가져오고있다. 각 공지는 이미지가 있는경우도있지만 없는경우도 있다.
따라서 fileList가 비어있는(파일첨부가 없는) 경우엔 첨부파일이 안나타나도록,
파일 첨부가 있는 경우엔 마지막 업로드한(최신) 첨부파일의 이미지가 나타나도록 설정했다. 이는 영화게시글CRUD에서 적극적으로 사용될것으로 보여진다. 공지사항은 테스트용으로 작성되었다.
파일이 있는 경우 미리보기가 다음처럼 나타난다.
