본문 바로가기

Dev-FE

[JS,TS] 파일 사이즈 단위 변환

업로드기능 개발하다보면 파일사이즈를 깔끔하게 보여줘야할 때가 있다.
File 타입에는 byte단위의 파일사이즈를 알 수 있다.
이 사이즈를 각 적절한 파일단위로 포맷하는 기능을 정리한다.

#0. 파일 단위

/**
 * @Bytes 바이트
 * @KB 킬로바이트
 * @MB 메가바이트
 * @GB 기가바이트
 * @TB 테라바이트
 * @PB 페타바이트
 * @EB 엑사바이트
 * @ZB 제타바이트
 * @YB 요타바이트
 */
const unit = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];​

#1. 파일변환 공식

  • 파일의 단위값:  1byte=210 = 1024
  • 각 사이즈값은 바이트의 거듭제곱값과 동일: =1024n
  • n 값을 구하려면 양변 로그를 취하면 된다. 

log(fileSize)=nlog(1024)

n=log(fileSize)log(1024) 

  • 추출된 n값은  위 #0.파일단위 의 unit 배열의 n번째 값으로 해당 단위를 추출할 수 있으며, byten을 통해 단위계산할 사이즈값을 추출할 수 있음

transSize=fileSize1024n

#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 ...
};

파일사이즈와 보여주고자 하는 소수점자리를 받아 필요한 자릿수만큼 변환하여 전달하는 함수

필요에따라 수정하여 사용