파일업로드!!!
Upload / Download
-> ProductController postAddUploadImage
- 관리자만 상품을 등록할 수 있으니 결론적으로 이미지 업로드도 관리자만 가능하도록 해야한다.
@RequestAttribute작성 ->if문작성
: 로그인을 안했거나 로그인을 했다고 한들 관리자가 아니라면 404띄우게 해준다.- 밑에 for문은 이미지 업로드 이름을 선택하기 위해 사용했던 것임으로 지워준다.
productService만들고 와서
controller에서productService멤버변수로 설정.
-> IProductMapper 만들기
-> ProductService uploadImages 메서드 생성
-> uploadImages 업로드된 이미지를 담을 테이블 생성
- 이미지 파일을 업로드 할때 하드에 올려놓는 것이 아니라 DB에 binary로 집어 넣을 것이다.
BLOB: Binary Large Object, 대형 이진 객체 / 많이 사용하진 않는다.
=> 파일업로드 등을 처리하기 위해 이진데이터를 받아야 할 때 사용한다. 작동원리는 Text랑 비슷하다.- data에는 byte배열이 들어가게 된다.
-> ImageEntity
- 넘겨주는 역할을 하는 컨트롤러로 넘어가자.
-> ProductController
- 파란색 줄 밑으로 다 추가되었음.
images의 길이와 같은 배열ImageEntity를 만든다.byte[] data = image.getBytes();은IOExecption을 던져서 IOExecption 시그니쳐 추가, 그래야MultipartFile객체의getBytes메서드를 호출할 수 있기때문이다.
- String id = image.getOriginalFilename(); 로 쓰면 왜 안될까?
로직같이 생겼는데 왜 서비스에서 안하고 컨트롤러에서 했을까?
=> entity, vo, dto는 controller가 준비해서 service에 줘야한다.
controller가 처음에 받는게 entity가 아닌 MultipartFile이다.
이것을 entity화 시켜서 service에게 줘야한다.
-> ProductService
-> ProductController
this.productService.uploadImages(imageEntities);추가
-> ProductService
-> ProductMapper.xml
-> 이미지를 넣어보고 확인해보자
- 이미지 업로드가 성공했다는 것에 대한 여부를 브라우저에게 알려주지는 않지만 alret 확인만 누르고 디비를 확인하면 이미지 추가가 된 것을 디비에서 확인 할 수있다.
다운로드 받을 때 필요한 것이 filt_type이다. 어떤 파일인지 알려주기 위해서
-> JSON 의존성 추가
우리가 쿠팡에 접속했을 때 이미지들이 보이는 것일 때 우리가 서버에 업로드한 것이 아닌 서버에서 이미지를 다운로드 받은 것이다. 지금까지 구현해 놓은 것은 서버에 업로드 한 것이다. 내려오는 것을 만들어보자.
CKEditor에서 이미지 업로드에 성공을 했으며
이미지에 접근 할 수 있는 경로를 JSON으로 반환하자.
-> ProductController
- 이미지 테이블에 업로드가 되었고 여기서 중요한건 통신내역이다.
js가product/daounload0image?id=%s랑 요청을 보냈다.
여기서 적은 id들이 DB에 들어온 id값이다.
이미지를 볼 때는 파일이름을 통해서 구분을 하는 것이 아닌 id를 통해서 구분을 하여 해당 주소로 들어갔을 때 이미지가 보일 수 있도록 한다.
아직 이것에 대한 맵핑을 만들지 않아서 엑스박스가 뜨며 이미지가 보이지 않는다.
만들어보즈아.
-> ProductController DownloadImages
- 이 id를 이용해서 imageEntity를 골라오면 된다.
-> ProductService getImage
- ImageEntity를 돌려주는 getImage 메서드 생성
-> IProductMapper selectImage
-> ProductMapper.xml selectImage
-> ProductService
-> ProductController
- if(id != null) 문 밑으로 작성.
-> 이미지 첨부 테스트
- 초록색 동그라미가 뜨면 된다. 그 자리에 잘 있다~
-> 정리를 하면
upload
: 사용자가 이미지 파일을 업로드를 하게 되면 MultipartFile로 받고 그것을 byte배열로 바꿔서 Db에 block으로 집어 넣는다.
Download
: block을 가지고 byte배열로 바꾸고 그 byte배열을 응답으로 만들어 줄 reponseEntity(T타입의 응답결과를 응답 그 자체 (responsebody)로서 반환해주기 위해 존재한다.)을 통해서 나가게 한다.
그렇게 되면 이미지를 보게 된다. png/ jpg를 판단 시켜주기 위해서는 content type header를 사용했다.
content - lenghtbyte 배열의 길이.- 이게 없으면 파일 다운로드 받을 때 총 얼마중에 얼마 받았다 혹은 시간이 얼만큼 남았는지 안뜨고 얼만큼 받고 있는지에 대해서 브라우저 스스로가 계산해서 뜨게 된다.
총 파일의 크기와 남은 시간을 알려주기 위해서는 이것을 작성해주고 서버가 이것을 보내주어야 한다.
상품 등록
-> ProductController
- 이름 PostAdd임.
-> 테이블 추가
-> ProductEntity
-> IProductMapper selectImage
-> ProductMapper.xml selectImage
-> AddResult
-> AddVo
-> ProductController PostAdd
-> ProductService
-> IProductMapper insertProduct
-> ProductMapper.xml insertProduct
- keyproperty = index : 우리가 던저준 product Entity의 객체의 setIndex 값을 레코드에 있는 index 열 값으로 가져와서 넣어준다.
- 반환되는 int는 영향을 받은 레코드의 수임은 변함이 없다.
- 상품등록이 끝나면 그 상품의 상세페이지로 이동을 할 것이기 때문에
index값을 돌려준다.
-> ProductService addProduct
- ( addVo의 getIndex하게 되면 몇 번 인덱스가 들어갔는지 잘 나온다. )
-> add.html
-> ProductController
- SUCCESS 일 때는 여기서 redirect 시킨다.
-> 사진 업로드를 해보자
- 상품등록하기를 누르면 이창이 뜨고 DB를 확인해야한다.
- 주소 / addVo.getIndex가 잘 찍히는 것을 확인 할 수 있다.
- products 테이블에 들어간 것을 확인 할 수 있다.
연습문제.. 어려운... 어려운
1. http://localhost:8080/temp/upload 에 접속하면 파일을 선택하여 업로드할 수 있는 페이지가 표시되게하세요.
이때 form 한개, input 두개(file, submit)을 사용합니다.
2. http://localhost:8080/temp/upload 페이지에서 파일 선택 후 업로드 할 경우 `temp`.`files` 테이블에 데이터가 업로드되게 하세요.
이 때 index 값을 파일 조회를 위한 기본 키로 합니다.
3. http://localhost:8080/temp/download?index=x 페이지를 조회할 경우 <2>에서 발생한 index 값에 해당하는 x값이 있을 경우 해당 파일 다운로드를(조회), 없다면 404(NOT_FOUND)를 발생시키세요.
