cloudinary API를 통해 이미지 업로드 해보기 (feat. Next.js)

이미지를 업로드 하기 위해 cloudinary 라는 CDN 을 사용

해당 api에서는 위젯과 같은 컴포넌트를 제공하지만 ui가 딱히 예쁘다는 생각이 들진 않아서 따로 사용하지 않고 upload api를 통해서 이미지 파일을 올리기로 함.  ( 문서 링크 )

end point는 아래와 같음

https://api.cloudinary.com/v1_1/:cloud_name/:action

이것을 통해 직접 입력한 값은 

const endPoint = `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload`;

https://www.postman.com/cloudinaryteam/programmable-media/request/mbkq17c/upload-file-unsigned?tab=body

해당 postman에서 upload시 필요한 바디 요소들

 

form-data 형식의 집합체를 선언하여 키와 값을 넣어준 뒤 통신의 body에 담아줌 

const file = event.target.files[0];
if (!file) throw new Error("something error on Upload");

const url = `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload`;

const formData = new FormData();

formData.append(
    "upload_preset",
    process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_PRESET!,
);
formData.append("api_key", process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY!);
formData.append("file", file);

const res = await fetch(url, {
	method: "POST",
	body: formData,
});

if (!res.ok) throw new Error("something is wrong");
const data = await res.json();
return data.url;

만약 다수의 이미지를 업로드 하고 싶다면 

const files = event.target.files;

if (!files) throw new Error("something error on Upload");
if (files.length + images.length > 5) {
	throw new Error("이미지 파일은 5개 이하로 만들어주세요");
}
const url = `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload`;
const formData = new FormData();

formData.append( "upload_preset",process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_PRESET!);
formData.append("api_key", process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY!);

const fetchResults = Array.from(files).map(async (file) => {
	formData.append("file", file);
	const res = await fetch(url, {
		  method: "POST",
		  body: formData,
	});
	if (!res.ok) throw new Error("something is wrong");
	const data = await res.json();
    return data.url;
});

const uploadUrls = await Promise.all(fetchResults);