[사전 정보]
- View에서 파일을 선택할 수 있는 방법
- 썸네일 이미지를 어떻게 보여줄 것인가
- 파일을 업로드 할 때 서버에서 해야할 것들, 필요한 라이브러리
[파일 업로드 프로토타입 만들기]
- 파일 선택 후 submit할 때, 파일 업로드가 될 수 있도록 프로토타입을 만듦
- 일반적으로는 화면에 썸네일 이미지를 노출하기 위해서 비동기로 파일 업로드 한 뒤, 응답 값으로 이미지 경로를 받아 처리한다고 한다.
- 하지만 여기서는 파일 선택 시 script를 이용하여 createObjectURL를 활용하여 썸네일 이미지를 노출하도록 한다.
파일 업로드 HTML 폼 작성
파일 업로드 핸들링 JS 작성
파일 업로드 Controller
[이미지 파일 외부 경로 설정 방법]
1. 톰캣 사용할 경우 Server.xml 내에 <Context> 태그 사용하여 프로젝트 외부 폴더를 읽을 수 있도록 하기
2. addResourceHandlers()에 registry에서 프로젝트 외부 파일 경로를 읽을 수 있도록 하기
3. 이미지 호출 URL에 대한 Controller를 만들어 사용
[파일 다운로드 프로토타입 만들기]
- View 구성
1. href를 이용하여 '/naver/download?fileName=${파일명 }' url로 controller 호출
- Controller
1. 파일명, 파일 전체 경로, 파일 타입, 파일 용량 등을 response에 설정
2. OutputStream을 통해 파일 쓰기
[프로젝트에 적용해야 할 부분]
- 파일 업로드 시 DB에 파일 경로 저장
- 업로드 시 thumbnail은 JS 사용
- 업로드 후 내용 볼 때 섬네일 이미지는 한줄평 이미지의 id 값으로 이미지 호출 controller를 활용하여 thumbnail 출력
- 다운로드 시 한줄평 이미지의 id 값으로 경로를 가져와 다운로드 작성
'Edu > BoostCourse - Web' 카테고리의 다른 글
[File Upload] Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: Current request is not a multipart request (0) | 2020.02.18 |
---|---|
[MultipartResolver] Unable to locate MultipartResolver with name 'multipartResolver' (0) | 2020.02.17 |
[REGEXP] 전화번호 (0) | 2020.01.20 |
[BoostCource] Test 코드 작성하면서 프로젝트 만들기 (0) | 2019.12.04 |
[웹 프로그래밍] 프로젝트 4 이후 정리 (0) | 2019.02.10 |