[React] Cloudinary 사용해서 이미지 저장하고 URL 받아오기

Cloudinary는 클라우드 기반의 이미지, 동영상 관리서비스로 서버에 저장하지 않고 클라우드에 저장하기 위해서 사용하려고 한다.

 

1. Cloudinary API 사용하기

https://cloudinary.com/

Image and Video Upload, Storage, Optimization and CDN

위 링크로 들어가서 회원가입을 해준다.

 

계정 생성 후 Settings - Account에서 클라우드 이름을 변경할 수 있다.

 

2. 프리셋 생성

Settings - Upload에서 아래로 내려서 Add upload preset 버튼을 클릭해준다.

프리셋 이름을 입력해 주고 (안 해도 되지만 프리셋 이름은 기억해두기) SIgning Mode를 Signed에서 Unsiged로 바꿔준 후 저장해준다.

 

3. REST API 로 업로드 하기

https://console.cloudinary.com/documentation/image_upload_api_reference

REST API 방식으로 업로드를 하기 위해선 공식 문서를 확인하면 사용법을 알 수 있다.

 

https://api.cloudinary.com/v1_1/:cloud_name/image/upload

위 BASE URL에서 아까 설정한 클라우드 이름을 넣어주면 된다.

 

const handleClick = async (e) => {
    e.preventDefault();
    const data = new FormData();

    data.append("file", file);
    data.append("upload_preset", "프리셋 이름");
    try {
      const uploadRes = await axios.post(
        "https://api.cloudinary.com/v1_1/클라우드 이름/image/upload",
        data
      );
      console.log(uploadRes.data.url);
    } catch (error) {
      console.log(error);
    }
  };

<input type="file onChange={(e) => setFile(e.target.files[0])}>

위 input 요소의 type속성을 file로 설정해서 이미지 파일을 올린 후 선택한 파일을 setFile로 상태관리하여 저장했다.

 

업로드하기 위해 FormData 객체를 생성하고

Cloudinary API에 대한 POST 요청을 만들고 선택한 파일과 설정한 프리셋 이름을 넣어준 data를 전달한다.

그리고 uploadRes.data를 콘솔을 찍어보면 URL을 포함하여 업로드 된 이미지 정보들을 받을 수 있다.

 

Cloudinary 클라우드에 잘 들어갔는지 확인하려면 Media Library에서 볼 수 있다!