The Debugging Chronicles : "코드의 미학"
이미지(파일) 업로드 본문
업로드(upload): 클라이언트(사용자, 브라우저) 이 본인이 로컬(폰, PC)에 가지고 있는 데이터를 서버(DB, 톰캣, 프로젝트)로 올리는 과정
로컬(폰, PC): resource ----> 서버(톰캣,프로젝트)
준비물
1. 이미지 파일(데이터)
2. 자바의 소스파일 -> .jar(라이브러리, 소스파일)
이미지 업로드를 구현할 때 필요한 클래스, 메서드를 제공
cos.jar 파일을 설치하는 방법
1. JAVA Build path
2.WEB-INF >> lib
3.apache-tomcat-10.1.28/lib
이미지를 등록해 보자
실습 순서
1. 마이페이지에서 특정 MEMBER의 프로필 이미지를 출력
2. 회원가입 페이지에서 새로운 프로필 이미지를 등록(회원가입)
1. 마이페이지 구현하기
V - mypage.jsp
C - MypagePageAction.java
M - MemberDAO >>>SELECTONE
1)V - mypage.jsp
컨트롤러에게 무엇을 요청해야하는가.
data + name, imagepath, mid
2)C - MypagePageAction.java
페이지를 방문할때는 .do 가 아니라 .jsp여야한다.
selectone에서 무엇이 필요한지 확인하기.
핸들러 맵퍼에 등록
view에서 mypage 이동
2. 회원가입 페이지에서 새로운 프로필 이미지를 등록(회원가입)
join.jsp
input 의 타입이 text는 파라미터가 바로 전송된는데
type= "file" 데이터를 form으로 전송할떄에는 인코딩(encoding/enc)작업이 필요!
mapper에 join.do 추가
그리고 컨트롤러에 joinaAction.java 추가
조인에 성공했을 때 - 메인으로, 실패했을 때 - 다시 조인페이지로
둘다 redirect(ture)니까 밖으로 빼기
둘다 memberDAO, DTO가 필요한 상황
getMid,getPassword,getName,geImagepath가 필요한 상황
그리고 필요한 데이터는 view에서 request로 받아온다
사용자가 이미지를 선택 안했을 때는 defulat.jsp가 들어간다.
만약에 사용자가 이미지가 등록했다면 insert(memberDTO)가 되기전에 바꾸어 주었어야한다.!!
로그찍어보기!!
이미지가
자 이제 파일을 한번 받아와보자
view에서 파일을 보낼때 multifile로 인코딩해서 보내기 때문에
try/catch 쓰기!!
getsubmittedFileName 같은 static method를 써준다
view에서 보내는 이미지 파일이 멀티파일로 인코딩 파일이기 때문에 메모리가 지나다니는 곳 마다
@MultipartConfig 어노테이션 을 써준다
이미지 업로드 로직을 써보자!
파일 객체를 생성 할때는 디렉터리와 파일명을 써주면된다.
디렉토리의 이미지 경로는 하드 코딩되기 때문에 응집도를 높이고 결합도를 낮추기 위해 상단에다가 배치 시켜준다
대표적인 스프링 사이드 코드
//
try (InputStream input = file.getInputStream();
// FileToSave => 서버 사이드에 저장이 될 파일
// 우리는 uploadFile이기 때문에 fileToSave 대신 넣어준다
FileOutputStream output = new FileOutputStream(uploadFile)) {
byte[] buffer = new byte[1024];
int length;
while ((length = input.read(buffer)) > 0) {
output.write(buffer, 0, length);
}
}catch(Exception e) {
e.printStackTrace();
}
package controller.member;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.nio.file.Paths;
import controller.common.Action;
import controller.common.ActionForward;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.Part;
import model.dao.MemberDAO;
import model.dto.MemberDTO;
@MultipartConfig
public class JoinAction implements Action {
private final static String DEFAULTIMAGEPATH="default.jpg";
private final static String PATH="D:\\KIM\\workspace02\\day039\\src\\main\\webapp\\images\\";
@Override
public ActionForward execute(HttpServletRequest request, HttpServletResponse response) {
String mid=request.getParameter("mid");
String password=request.getParameter("password");
String name=request.getParameter("name");
String imagepath=DEFAULTIMAGEPATH;
MemberDAO memberDAO=new MemberDAO();
MemberDTO memberDTO=new MemberDTO();
memberDTO.setMid(mid);
memberDTO.setPassword(password);
memberDTO.setName(name);
memberDTO.setImagepath(imagepath);
Part file=null;
try {
file=request.getPart("imagefile");
} catch (Exception e) {
e.printStackTrace();
}
imagepath=Paths.get(file.getSubmittedFileName()).getFileName().toString();
if(!imagepath.isEmpty()) { // 사용자가 이미지를 등록했다면,
System.out.println("로그 : 이미지 업로드 시작");
// 이미지 업로드 로직
File uploadFile=new File(new File(PATH), imagepath);
try (InputStream input = file.getInputStream();
FileOutputStream output = new FileOutputStream(uploadFile)) {
byte[] buffer = new byte[1024];
int length;
while ((length = input.read(buffer)) > 0) {
output.write(buffer, 0, length);
}
}catch(Exception e) {
e.printStackTrace();
}
memberDTO.setImagepath(imagepath);
System.out.println("로그 : 이미지 업로드 끝");
}
boolean flag = memberDAO.insert(memberDTO);
ActionForward forward = new ActionForward();
forward.setRedirect(true);
if(flag) {
forward.setPath("main.do");
}
else {
forward.setPath("joinPage.do");
}
return forward;
}
}
'FrontEnd' 카테고리의 다른 글
[웹 브라우저] Network panel 파헤치기 (0) | 2025.01.03 |
---|---|
개발자 도구 - Application Panel (0) | 2024.12.30 |
웹에 최적화된 안내창 (1) | 2024.09.04 |
기본 예제로 알아보는 ajax 비동기 처리 - JSON 데이터 (0) | 2024.08.24 |
비동기 처리 - 개념 (0) | 2024.08.24 |