[Project/Reactjs] 이미지 클라우드 처리하기 (cloudinary)

 

목차

 

 

 

 

0) 이미지 클라우드 처리

 

프로젝트 진행 중 이미지를 클라우드 처리하기로 하면서

다양한 방법을 모색하던 도중 cloudinary 라는 사이트를 통한 클라우드화 방법을 찾아냈다.

 

간단한 프로젝트용도로 사용할 예정이라면 안성맞춤이다.

 

일단 비용이 들지 않으며, 기본적으로 무료 용량이 제공되어서 매우 좋다.

구현방법도 간단하고 편리하고, 다양한 기능들이 많다.

 

 

1) cloudinary 가입하기

 

https://console.cloudinary.com/

Image and Video Upload, Storage, Optimization and CDN

 

 

 

 

 

2) 프리셋 설정 (API key)

 

홈으로 오면 이런 화면이 뜬다. 

대시보드에서는 내 Cloud name 과 API keys 를 확인 가능하다.

(API 키 사용 없이 작업했기 때문에 따로 사용하진 않았다.)

 

 

 

좌측 하단에 `설정 버튼` > `Upload`

 

 

Preset 을 추가해준다. 

 

Mode : `Unsigned` 사용자 인증 없이 업로드 허용 가능

Setting :  `Upload Preset`  공개적으로 설정되어 있다면 API 키 없이 업로드 가능

 

 

 

 

 

 

3) 이미지 업로드 구현 (프로젝트)

 

 

 

 

예약이 완료된 경우, 예약 내역에서 리뷰 작성 버튼을 눌러 리뷰 작성을 할 수 있다.

리뷰 작성 페이지에서는 최대 4장의 리뷰사진을 올릴 수 있도록 구현했다.

 

 

 

 

 

 

작성하기 버튼을 누르면 이미지 업로드 함수를 호출해서

이미지가 클라우드에 업로드 되기까지 기다린다.

 

 

 

 

 

formData 에 업로드 할 `file` 과 `upload_preset` 값을 넣어주면 된다.

 

 

 

 

  const handleUpload = async () => {

    if (!images || images.length === 0) { // 이미지가 없으면 빈 배열 반환
      return [];
    }

    const uploadedUrls = []; // 업로드된 이미지 URL을 저장할 배열

    for (let i = 0; i < images.length; i++) {
      const formData = new FormData();
      formData.append('file', images[i]);
      formData.append('upload_preset', 'PRESET_NAME'); //

      try {
        const response = await axios.post(
          'https://api.cloudinary.com/v1_1/'CLOUD_NAME'/image/upload',
          formData
        );
        if (response.data && response.data.secure_url) {
          uploadedUrls.push(response.data.secure_url);
        }
      } catch (error) {
        console.error('이미지 업로드 오류:', error);
      }
    }

    console.log('Uploaded Images:', uploadedUrls);
    return uploadedUrls; // 모든 업로드된 이미지 URL 배열 반환
  };

 

 

업로드할 이미지가 없는 경우에는 `return`

저장할 이미지가 있으면 개별적으로

cloudinary Rest API 요청 URL 을 통해서 이미지를 업로드해준다.

이후 업로드 된 링크를 반환해준다.

클라우드화된 이미지 링크를 배열에 다시 담아서 db 로 보내주는 방식이다.

 

 

 

 

 

Media Explorer 에서 업로드된 이미지들을 확인해볼 수 있다.

 

 

 

 

 

 

최종적으로 db 에 이런식으로 저장되고 

 

 

 

출력할땐 그대로 src 에 넣으면 이미지가 출력된다.