<aside> 💡 다운로드 진행 이벤트를 처리하는 onDownloadProgress 핸들러도 있다.

</aside>

Axios에서 업로드 진행 이벤트를 처리하는 onUploadProgress 핸들러를 이용해 업로드 진행 상황을 확인할 수 있다. 주로 업로드 진행 상태를 UI로 표현할 때 활용한다. onUploadProgress 핸들러는 ProgressEvent 네이티브 이벤트 객체를 인자로 받는다. ProgressEvent 객체는 아래 속성을 포함한다. — MDN

1. loaded : 이미 수행한 작업의 양(업로드한 크기)을 나타내는 unsigned long long 형식의 데이터
2. total : 작업의 총 양(총 파일 크기)을 나타내는 unsigned long long 형식의 데이터
3. lengthComputable : 진행 상황 측정 가능 여부를 나타내는 Boolean 값

axios.post(api_url, formData, {
	headers: {
		'Authorization': 'Bearer ...',
		'Content-Type': 'multipart/form-data'
	},
	onUploadProgress: (progressEvent: ProgressEvent) => {
		const { loaded, total } = progressEvent;
		const percent = loaded / total * 100;
		console.log(`total: ${total} | loaded: ${loaded}, percent: ${percent}%`);
	}
})

파일 크기가 크기 않고 네트워크 속도가 빠르다면 최초 이벤트를 받을 시점에 이미 업로드가 완료된 정보가 나온다. 이땐 구글 크롬 네트워크 탭에서 느린 3G 환경으로 설정하면 진행 상황을 확인해볼 수 있다.