[JS] 업로드 진행 이벤트를 처리하는 onUploadProgress

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 환경으로 설정하면 진행 상황을 확인해볼 수 있다.

 

 

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

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요