[SPRING] [AWS] 게시글 이미지 업로드 하기 (3) - 이미지 수정,삭제하기 + bug fix

사실 어려운건 업로드가 아니었다... S3 설정만 잘해주면 잘 된다.. S3에 올라간 것도 확인이 되고 url도 잘 뱉어내고..

문제는 수정!

 

1. PUT 으로 게시글 전체 수정 메소드를 만든다
   • 게시글 내용 수정 + 이미지 변경
     • 잘됨
   • 게시글 내용 수정 + 이미지 변경 안함 
     • 예상 : 게시글 내용만 수정 + 기존 이미지 그대로
     • 결과 : 게시글 내용 수정 + 기존이미지가 아닌 null 값이 들어감.
   • 🧨PUT 이기때문에 그런가? PATCH를 써야하나? 하다가 차라리 메소드를 나누기로 했다!
2. PUT 게시글 내용 수정 메소드 // PUT 게시글 이미지 수정 메소드 
   
   • 어차피 메소드는 세세하게 주면 좋지 않을까..?
   • 이왕 이렇게 된 거 게시글에서 이미지만 삭제하고 싶을 수 있지 않을까?
     • DELETE 게시글 이미지 삭제 메소드 

 

이렇게 따로따로 메소드를 만들기로 하였다.

 

그리고 , 수정시에는 기존 S3에 저장된 이미지 데이터 삭제 후 수정시 업로드 된 이미지 데이터를 S3에 업로드를 해야 좀더 효율적으로 S3 를 관리할 수 있을 것같았다. ....(그리고 엄청 삽질을 함)

---

계속 프로젝트를 하다보니 결국에는 PUT Method로 한번에 수정할 수 있는 로직을 만들었다!

• 게시글 내용 수정 + 이미지 변경 안함 
  • 예상 : 게시글 내용만 수정 + 기존 이미지 그대로
  • 결과 : 게시글 내용 수정 + 기존이미지가 아닌 null 값이 들어감.🧨

이 부분이 문제였는데 정말이지 어이없게도 조건문 하나를 추가하니 되었다...^^

 

String meetingImage = meeting.getMeetingImage();

if(meetingImage != null ){
	if(image == null || image.isEmpty()) { //입력받은 사진이 없는경우 
		meetingImage = meeting.getMeetingImage(); // 원래있던 사진을 띄우기
    }else if (!image.isEmpty()) {
		try{
			s3Upload.fileDelete(meetingImage);
            meetingImage = s3Upload.uploadFiles(image, "images");
        }catch (IOException e){
         log.error(e.getMessage());
        	}
		}
	}else{ // 원래 사진이 없는 경우 
      if(image == null || image.isEmpty()){ //입력받은 사진이 없으면 
        reviewImage = null; // 그대로 null값
      }else if (!image.isEmpty()){
        try{
          reviewImage = s3Upload.uploadFiles(image,"reviews");
        }catch (IOException e){
          log.error(e.getMessage());
        }
      }
    }

• 그냥 if절만 추가하면 되는데 왜 이걸 못해서 메소드를 굳이 나눈거지..? 이제라도 알았으니 되었다..^^

---

S3 Service

• 일단 S3에 있는 데이터를 삭제하는 메소드를 찾아야 했다.
• 참고한 블로그 더보기 

https://mighty96.github.io/til/s3-upload/

[Spring] S3를 통해 이미지 업로드, 이동, 삭제하기

https://doing7.tistory.com/47

[AWS] S3 Spring에서 사용하기 - 이미지 삭제

https://docs.aws.amazon.com/ko_kr/sdk-for-java/v1/developer-guide/examples-s3-objects.html

작업 수행Amazon S3객체 - AWS SDK for Java

 

// S3 delete file
public void fileDelete(String fileName) {
  log.info("file name : " + fileName); //url

  try {
    amazonS3Client.deleteObject(this.bucket, fileName);

  } catch (AmazonServiceException e) {
    System.err.println(e.getErrorMessage());
  }
}

👉 블로그를 참고하여 쉽게 찾았으나..... 계속 되지않았다..

 

 

 

 

Posting Entity 

//게시글 사진 수정시
public void updateImage(String postImg) {
  this.postImg = postImg;
}

//게시글 사진 삭제 시
public void deleteImage(String postImg) {
  this.postImg = null;
}

👉 생성자 방식이므로 따로 지정해주었다.

 

Posting Service

//게시글 사진 수정
@Override
@Transactional
public PostingResponseDto updateImage(Long id, MultipartFile image) {
  //권한 확인..웅앵.. 생략
  
  String postImg = posting.getPostImg(); //일단 기존 사진 넣어주고

  if (!image.isEmpty()) { //매개변수로 받은 게 있다면
    try {
      s3Upload.fileDelete(postImg); // 기존사진을 S3에서 삭제하고
      postImg = s3Upload.uploadFiles(image, "images"); //새로 받은걸 업로드해주고
      System.out.println(postImg);
    } catch (IOException e) {
      e.printStackTrace();
    }
  }
  posting.updateImage(postImg); // url도 바꿔서 db에 저장
  return new PostingResponseDto(posting);
}

👉 새로운 사진으로 변경하기 전에 기존 사진을 S3에서 삭제하도록 넣어줬는데...

👉 사진은 무사히 변경되었으나 도무지 삭제가 안되었다 ..^^

 

---

🚨 Docs 를 잘 확인 하자 ^^

👉 그제서야 공식문서가 생각나서 확인해 보았다

👉bucket_name과 객체 키값이 들어가야한다

 

👉 객체 속성에 들어가보니 dirName+UUID+now(시간).jpg로 되어있다

👉 그러면 삭제 시에 저 키값이 들어가야 한다는 건데...?

 

👉 삽입되는 String fileName은 Url 값이다

• 즉 fileName =
• https://bucket-name.s3.ap-northeast-2.amazonaws.com/images/baa64aae-52af-4bf8-8377-b6a5895ca172.20220922_185324.jpg
  • https://bucket-name.s3.ap-northeast-2.amazonaws.com/
  • 이부분을 잘라주면
  • images/baa64aae-52af-4bf8-8377-b6a5895ca172.20220922_185324.jpg
  • 이것이 곧 해당 사진의 키값이 된다!

👉String 자르기? substring!!

2022.08.06 - [JAVA] - [JAVA]메소드 - Substring() 문자열 자르기

[JAVA]메소드 - Substring() 문자열 자르기

👉 솔직히 오늘은 너무 지치기도 해서 index를 그냥 세서 ^^ 했지만... indexOf 를 사용하면 해당 index를 쉽게 구할 수 있다.

 

---

Postman

👉 게시글 작성 .. 해당 사진을 넣었다

👉게시글 사진 수정 . 일단 url 값이 바뀐게 확인 되었다

 

🚩그러면 S3에서 처음에 넣었던 사진이 사라지고 저게 생성이 된걸까?

👉 수정된 사진은 올라가고 처음에 올린 사진은 없는 걸 확인 할 수 있다.

👀(작성시 올린 사진)

fbf6b46b-8a73-40c7-a9da-035594a33ea8.20220923_032601.jpg