JS에서 클라우드 플레어로 이미지 업로드하기

html :

<div class="container w-50 mt-3">
        <form>
            <h2 class="text-center">사진 업로드</h2>
            <div class="mb-3">
                <input type="file" class="form-control" name="file" id="file">
            </div>
            <div class="text-center">
                <button type="button" class="btn btn-outline-primary"
                    onclick="handleArticlePhotoUploadBtn()">업로드하기</button>
            </div>
        </form>
    </div>

버튼을 클릭하면? handleArticlePhotoUploadBtn함수가 실행된다.

JS :

// 사진 업로드 버튼 누르면 1회용 URL얻는 함수 실행
const handleArticlePhotoUploadBtn = () => {
	let getParams = window.location.search;
	let articleParams = getParams.split("=")[1];
	getArticleUploadURL(articleParams);
};

아티클의 pk값을 파라미터로 받아 getArticleUploadURL를 실행시킨다.

async function getArticleUploadURL(article_id) {
	const response = await fetch(
		`${backend_base_url}/api/medias/photos/get-url/`,
		{
			headers: {
				Authorization: `Bearer ${token}`
			},
			method: "POST"
		}
	);
	const data = await response.json();
	console.log(data["uploadURL"]);
	return uploadArticlePhoto(data, article_id);
}

1회용 업로드 url을 받은 후

//실제로 클라우드플레어에 업로드
async function uploadArticlePhoto(data, article_id) {
	const file = document.getElementById("file").files[0];
	const formData = new FormData();
	formData.append("file", file);
	const response = await fetch(`${data["uploadURL"]}`, {
		body: formData,
		method: "POST"
	});
	const results = await response.json();
	const realFileURL = results.result.variants[0];
	return createArticlePhoto(realFileURL, article_id);
}

실제 파일인 file을 클라우드플레어에 업로드한다. 그 후 file의 실제url을 받는다.

// 아티클 사진 백엔드로 업로드
async function createArticlePhoto(realFileURL, article_id) {
	const token = localStorage.getItem("access");
	const response = await fetch(
		`${backend_base_url}/api/articles/${article_id}/photos/`,
		{
			headers: {
				Authorization: `Bearer ${token}`,
				"content-type": "application/json"
			},
			body: JSON.stringify({
				file: realFileURL
			}),
			method: "POST"
		}
	);
	window.location.replace(`${frontend_base_url}/`);
	return response;
}

그리고 백엔드에 실제file url을 post요청으로 보낸다. 그러면 db에 저장이 되고 나중에 get요청으로 사진을 받아올 수 있다. !!