S3 버킷 스프링 어플리케이션에서 사용하기

s3에 이미지 저장해서 이미지 경로를 만들어주는 S3Service를 만들었다

@Service
@RequiredArgsConstructor
public class S3Service {

    @Value("${spring.cloud.aws.s3.bucket}")
    private String bucket;
    private final S3Presigner s3Presigner;

    String createPreSignedUrl(String path) {
        var putObjectRequest = PutObjectRequest.builder()
                .bucket(bucket)
                .key(path)
                .build();
        var preSignRequest = PutObjectPresignRequest.builder()
                .signatureDuration(Duration.ofMinutes(3))
                .putObjectRequest(putObjectRequest)
                .build();
        return s3Presigner.presignPutObject(preSignRequest).url().toString();
    }
}

 

기존에 id, title, price 컬럼이 있는 item 엔티티를 수정해서 이미지 url을 String으로 가지게 하고

db에 저장하거나 수정할때 S3이미지 링크도 db에 저장해 url에서 불러오게 했다

<form action="/add" method="post">
    <input name="title" placeholder="제목을 입력하세요">
    <input name="price" placeholder="가격을 입력하세요">
    <input name="imgurl">
    <!-- input에 입력시 getURL()을 실행 -->
    <input type = "file" aria-valuetext="" onchange="getURL((this))">
    <img src = "url" >
    <button type="submit">전송</button>
</form>



<!-- 유저가 입력한 파일을 인코딩해서 보냄 -->
<script>
    async function getURL(e){
        let name = encodeURIComponent(e.files[0].name)
        let result = await fetch('/presigned-url?filename=' + e.files[0].name)
        result = await result.text()

        let response = await fetch(result,{
            method : 'PUT',
            body : e.files[0]
        })

        console.log(response)

        if (response.ok) {
            // S3 업로드 성공시 실행
            let url = result.split("?")[0];
            document.querySelector('input[name="imgurl"]').value = url;
            document.querySelector('img').src = url;
            console.log(url)
        }
    }
</script>

이미지 url을 db에 넣어서 불러오게 했다

잘? 들어간 모습