업로드기능 개발하다보면 파일사이즈를 깔끔하게 보여줘야할 때가 있다.
File 타입에는 byte단위의 파일사이즈를 알 수 있다.
이 사이즈를 각 적절한 파일단위로 포맷하는 기능을 정리한다.
#0. 파일 단위
/**
* @Bytes 바이트
* @KB 킬로바이트
* @MB 메가바이트
* @GB 기가바이트
* @TB 테라바이트
* @PB 페타바이트
* @EB 엑사바이트
* @ZB 제타바이트
* @YB 요타바이트
*/
const unit = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
#1. 파일변환 공식
- 파일의 단위값:
= 1024 - 각 사이즈값은 바이트의 거듭제곱값과 동일:
- n 값을 구하려면 양변 로그를 취하면 된다.
- 추출된 n값은 위 #0.파일단위 의 unit 배열의 n번째 값으로 해당 단위를 추출할 수 있으며,
을 통해 단위계산할 사이즈값을 추출할 수 있음
#3. 파일사이즈 변환
/**
* 파일 사이즈 전황 함수
* @param bytes
* @param decimals
* @returns
*/
export const formatBytes = (bytes: number, decimal = 0) => {
const k = 1024.0; // 1 byte (2^10)
const dim = decimal > 0 ? decimal : 0; // 소수점 자릿수 제어
const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; // 사이즈 indexing
/**
* size = byte(1024)^n
* -> log(size) = n*log(byte)
* -> n = log(size) / log(byte)
*/
const i = Math.floor(Math.log(bytes) / Math.log(k)); // 사이즈가 정수가 아닌경우, 앞단위값으로
const unit = k ** i; // 1024^i; 해당 단위의 단위사이즈 구하기
return `${new Intl.NumberFormat().format((bytes / unit).toFixed(dim))}${sizes[i]}`; // ex) 32KB, 2.4GB ...
};
파일사이즈와 보여주고자 하는 소수점자리를 받아 필요한 자릿수만큼 변환하여 전달하는 함수
필요에따라 수정하여 사용
'Dev-FE' 카테고리의 다른 글
[WEB] #5. 캔버스에 스파이뷰 추가하기 (0) | 2024.03.26 |
---|---|
[WEB] #4. 캔버스 이미지 처리 (1) | 2024.03.18 |
[React-Antd]#1. upload render 디자인 커스텀하기 (0) | 2024.02.28 |
[React-Native] #2. React Native - navigation 이용한 페이지 이동 (0) | 2022.10.30 |
[React-Native] #1. React Native 프로젝트 첫 시작하기 (0) | 2022.10.19 |