JSP - 파일업로드 cos라이브러리 사용하기

 

프로젝트를 진행하고있는데 , 권한을 가진 사람만 제품의 리스트를 업로드 할수있게 하려니

일반적으로 배운 textarea나 썸머노트가 아닌 파일업로드를 하고 그 파일의 경로를 디비에저장할수있게 하고싶어졌다.

이미지파일을 업로드 할수잇는 라이브러리를 사용할 예정!

일단 폼을 만든 후 테스트를 해보아야겠다

 

1. COS 라이브러리 다운

http://www.servlets.com/cos/

Servlets.com | com.oreilly.servlet

 

 

 

 

쭉 내려가면 다운로드가 보인다!

책에있는 버전과는 다르지만 다운~

 

web-inf -> lib폴더에 넣으면 cos 라이브러리를 사용할 준비 끝!!!

 

 

와우.. 드디어 cos라이브러리를 사용하는데 진짜 하루종일 얘랑 밀당한거 같다

테스트한 폼은 사라졌으니 지금 프로젝트 폼으로 정리해야게땅.

 

 

 

1. form데이터가 있는 jsp파일

form태그 안에 input type이 file인 것만 추가해도된다.

기존에 있는 폼에 file태그만 추가했다.

여기서 중요한 건 폼 속성에 enctype="multipart/form-data" 을 추가해주어야 한다.

 

<div class="card">
		<div class="card-header">Ring 제품 업로드</div>
		<div class="card-body">
			<form action="/product?cmd=writeProc" method="POST"
				enctype="multipart/form-data">
	
				<div class="form-group">
					<label for="images">product images upload</label> 
					<input type="file" class="form-control" name="images" id="img_input">
				</div>
				
				<div class="form-group">
					<label for="productname">Ring Name</label> <input type="text"
						class="form-control" placeholder="링이름" name="productname"
						required="required" maxlength="50">
				</div>
				
				
				<div class="form-group">
					<label for=madeof>Made Of</label> <input type="text"
						class="form-control" placeholder="재질" name="madeof"
						required="required" maxlength="50">
				</div>
				
				
				<div class="form-group">
					<label for="content">Content</label> <input type="text"
						class="form-control" placeholder="리스트페이지 간단한 설명" name="content"
						required="required" maxlength="50">
				</div>
				
				
				<div class="form-group">
					<label for="detail">detail</label>
					<textarea name="detail" class="form-control" rows="10" cols="5"placeholder="링 설명"></textarea>
				</div>

				<button type="submit" class="btn btn-primary">Submit</button>
			</form>
		</div>
	</div>

 

2. 폼을 받아 실행할 java파일

 

나는 upload파일을 생성하여 저장할거라서 savePath라는 변수 안에 upload를 넣어주었당

이 파일도 이클립스가 만들어 주는거 아니고 내가 만들어주어야한다. 만들수있는 코드도 있는긴 하더라

그 아래는 절대경로의 주소이다. 절대경로로 저장하여 JSP파일에 뿌리면 될것이라 생각했는데 아니였다.

최초경로가 / 로 되어있기 때문에 /뒤의 경로로 저장해야되더라..

지금 생각해보면 당연한건데 이걸 몇시간동안이나 낑낑거렸다..

 

또, enctype="multipart/form-data"의 속성을 가진 데이터는 request.getparmeter로 받으면 안되더라..

MultipartRequest를 생성해주고 거기서 파라메터를 가져와야한다.

 

절대경로나 파일명등을 불러오주는 메소드들이 많은데 모르니까 하나씩 뿌려봤다.

나는 "/upload/~~~" 업로드뒤의 파일명만 적어줄것이기때문에 파일명만 갖고와서 디비에 저장했다..

이렇게 했는데 내일 모레 갔는데 왜 이런 노가다를 했느냐고 샘이 질책하실거 같다..

했다는 것에 의미를 두겠다..

 

public class ProductWriteProcAction implements Action {

	@Override
	public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		
		String savePath="upload"; // 저장하고싶은 파일, 
		ServletContext context = request.getSession().getServletContext();//프로젝트 절대경로
		String uploadFilePath = context.getRealPath(savePath);
		System.out.println(uploadFilePath);
		
		
		MultipartRequest multi = new MultipartRequest(request, uploadFilePath, 1024 * 1024 * 2, "UTF-8",
				new DefaultFileRenamePolicy());
		
		
		
		String type = multi.getParameter("type");
		String productname = multi.getParameter("productname");
		String madeof = multi.getParameter("madeof");
		String content = multi.getParameter("content");
		String detail = multi.getParameter("detail");
		String images = multi.getOriginalFileName("images");
		
		
		ProductDao productDao = ProductDao.getInstance();
		int result = productDao.save(type, productname, madeof, content, detail, images);

		if (result == 1) {
			RequestDispatcher dis = request.getRequestDispatcher("/product?cmd=list&type="+type);
			dis.forward(request, response);
		} else {
			Script.back(response, "글 입력시 오류가 발생하였습니다.");
		}
	}
}

 

3. DB에 있는 이미지와 텍스트를 뿌릴 jsp파일

img src="" 이 부분에서 계속 오류가 났다..

DB에 상대경로를 저장해야할지, 절대경로를 저장해야할지

또 뿌리리때 쌍따옴표도 함께 뿌려야하는건가 이런저런 고민을 많이했다..

하고나니까 진짜 별거 아닌거 같다....

 

<!--  반복구간 -->
				<c:forEach var="productList" items="${productList}">
					<div class="post-entry-1 h-50">
					 	<a href="#"> <img src="/upload/${productList.images}"		 	
							alt="Image" class="img-fluid">
						</a>
						<div class="post-entry-1-contents">
							<span class="meta">${productList.productname}</span>
							<h2>${productList.madeof}</h2>
							<p>${productList.content}</p>
						</div>
					</div>
				</c:forEach>
				<!--  반복구간 끝 -->