인스타그램 클론 코딩 이미지업로드 로직

업로드 jsp파일

                <!--사진업로드 Form-->
                <form class="upload-form" action="/image" method="POST" enctype="multipart/form-data">
                    <input  type="file" name="file"  onchange="imageChoose(this)"/>
                    <div class="upload-img">
                        <img src="/images/person.jpeg" alt="" id="imageUploadPreview" />
                    </div>
                    
                    <!--사진설명 + 업로드버튼-->
                    <div class="upload-form-detail">
                   		 <input type="text" placeholder="사진설명" name="caption">
                        <button class="cta blue">업로드</button>
                    </div>
                    <!--사진설명end-->

현재 이미지 파일과 사진설명 text자료를 form으로 post형태 전송

 

ImageController.java

	@PostMapping("/image")
	public String imageUpload(ImageUploadDto imageUploadDto, @AuthenticationPrincipal PrincipalDetails principalDetails){
		
		if(imageUploadDto.getFile().isEmpty()) {
			throw new CustomValidationException("이미지가 첨부되지 않았습니다.", null);
		}
		
		imageService.사진업로드(imageUploadDto, principalDetails);
		return "redirect:/user/"+principalDetails.getUser().getId();
	}

컨트롤러에선 해당 이미지가 비어있다면 exception을 발생시켜 던지고 정상적으로 입력됬다면 service에 사진업로드로 데이터 전송 리턴값에는 돌아갈 유저 데테일페이지 principalDetails에는 현재 로그인된 유저의 정보가 담겨있다.

 

여기서 domain이 아닌 dto를 만들어야할 이유가 생긴것이다 왜냐 현재 Image(domain클래스를 보면)

package com.cos.photogramstart.domain.image;

@Builder 
@AllArgsConstructor
@NoArgsConstructor
@Data
@Entity 
public class Image {
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY) 
	private int id;
	private String caption; // 사진글
	private String postImageUrl; 
	// 사진을 전송받아서 그 사진을 서버에 특정 폴더에 저장 - DB에는 그저장된 경로만 insert할것
	
	@JsonIgnoreProperties({"images"})
	// 객채 자체를 DB에 저장할 경우 포린키로 저장된다.
	@JoinColumn(name="userId") 
	@ManyToOne(fetch = FetchType.EAGER)
	private User user; // 한명의 유저는 여러이미지를 생성가능
						// 이미지는 하나의 유저만 가질 수 있다.
	// 이미지 좋아요
	@JsonIgnoreProperties({"image"})
	@OneToMany(mappedBy = "image")
	private List<Likes> likes;
	
	// 이미지 댓글
	@OrderBy("id DESC")
	@JsonIgnoreProperties({"image"})
	@OneToMany(mappedBy = "image") // 연관관계의 주인이 아니다 명시
	private List<Comment> comments;
	
	private LocalDateTime createDate;
	// 항상 데이터베이스에는 시간이 중요하니 넣어줍니다.
	
	@Transient // DB에 컬럼이 만들어지지 않는다.
	private boolean likeState;
	
	@Transient
	private int likeCount;
	
	@PrePersist 
	public void createDate() {
		this.createDate =  LocalDateTime.now();
	}
	
	// 오브젝트를 콘솔에 출력할 때 문제가 될 수 있어서 User 부분을 출력되지 않게 함.
//	@Override
//	public String toString() {
//		return "Image [id=" + id + ", caption=" + caption + ", postImageUrl=" + postImageUrl 
//				+ ", createDate=" + createDate + "]";
//	}
	
	
	
}

음 그럼 파일을 저장할 File file만들면 안되나요? 그래도 되긴하는데 현재 db를 보면

file그 자체는 필요가 없고 file로 postImageUrl만 필요하다 즉 file의 경로의 주소만 필요하다(어디에 저장이 되어있는지)

그렇기 대문에 dto를 생성하여 file과 caption을 받고 service에서 해당 db에 넣기위해 필요한 postImageUrl userid를 받아와 Image형태로 바꿔 넣게됌

 

ImageService.java

	@Transactional
	public void 사진업로드(ImageUploadDto imageUploadDto, PrincipalDetails principalDetails) {
		UUID uuid = UUID.randomUUID(); // uuid
		String imageFileName= uuid +"_"+imageUploadDto.getFile().getOriginalFilename(); 
//		 실제 파일 이름이 담기게 된다.
//		 파일을 저장할때 똑같은 파일명이 들어오게 된다면 
//		 똑같은 이름으로 또 들어와 원래있던 사진에 덮어 씌우게 된다
//		 이를 방지하기 위해 UUID를 사용하자
//		 하지만 UUID라도 랜덤으로 값을 뽑기때문에 같은 값을 뽑을 확률이 몇십억분의 일이지만
//		 그것마저도 방지하기위해서 uuid뒤에 원래 이미지의 이름까지 더해주게된다.
//		 그렇다면 99.9999999%는 위와 같은일이 없을것이다.
		
		Path imageFilePath = Paths.get(uploadForder+imageFileName);
		
		// 통신, I/O -> 예외가 발생할 수 있다.
		// runtime시에만 발견된다 그래서 무조건 위와같은 것을 실행할땐 예외처리를 무조건 해주어야 한다.
		try {
			Files.write(imageFilePath, imageUploadDto.getFile().getBytes());
		}catch(Exception e) {
			e.printStackTrace();
		}
		Image image = imageUploadDto.toEntity(imageFileName,principalDetails.getUser());
		imageRepository.save(image);
	}

현재 서비스에선 imageFilePath에 사진이 저장될 경로 + 파일이름이 저장이되고 

마지막줄에서 domain image에 toEntity를 이용하여 db에 들어갈 데이터를 완성하게된다 다시 db 구성을 살펴보면

처음에 form에서 데이터를 받아올땐 capiton과 file을받아왔고 

service에선 file을 이용하여 postImageUrl값을 만들어 저장 

 

그렇담 ImageUploadDto -> Image형태로 변경되어 db에 save요청을 하게된다