[Cloudinary] 클라우디너리를 사용하여 이미지 저장하기

0. 왜 사용할까?

• 서버에 이미지를 저장하지 않고 storage에 따로 이미지 파일을 저장하고자 함

1. cloudinary 가입

https://cloudinary.com/

2. (생략가능) 클라우드 이름 변경

settings - Account

기본적으로 주어지는 이름이 있으므로 생략해도 되지만 원한다면 내 클라우드 이름을 바꿔준다
무료 사용자는 기본으로 클라우드 용량 100MB 제공된다

3. 프리셋 생성

• Settings - Upload 에 들어가서 밑으로 내리다 보면 Add upload preset 이 나오는데 이것을 클릭해주자
  

• sigining Mode를 unsigned로 체크하고 save 클릭
  

• 생성된 프리셋의 이름을 기억해두자.
  

4. 클라우드 URL 확인

메인으로 가서 Account Details을 확인해보자.
Rest API를 사용하여 이미지를 저장할 것이므로 여기서 API key와 API Base URL을 확인해야 한다.
이미지 업로드용 API URL은 아래와 같은 형식으로 되어있다.

https://api.cloudinary.com/v1_1/[클라우드 이름]/image/upload

5. 클라우드에 이미지 저장하기

    const onDrop = async(files) => { //서버에 파일 업로드
        let formData = new FormData();
        formData.append("api_key", "[자신의 API key]");
        formData.append("upload_preset", "[기억해둔 프리셋 이름]");
        formData.append("timestamp", (Date.now() / 1000) | 0);
        formData.append(`file`, files[0]);

        const config = {
            header: { "Content-Type": "multipart/form-data" }
        }

        await axios.post('https://api.cloudinary.com/v1_1/[클라우드 이름]/image/upload', formData,config)
        .then(res=>{
            uploadPost(res.data.url)
        })
    }