CATEGORY

【Vue.js】ファイルサイズのバイト数をKB・MB・GBに変換する方法

アプリケーションを構築する上でファイルサイズを表示する場面があるかと思いますが、全てのファイルがバイト数のまま表示されているとユーザービリティはとてつも無く下がります。KB・MB・GBなど適切な単位に変換して表示すればファイルサイズを把握しやすいと思います。

今回は、JavaScriptでファイルのバイト数をKB、MB、GBに変換する方法を紹介します。フレームワークはVue.jsを使用しています。

もし不明な点や質問、ご指摘がありましたら、記事下のフォームからコメントをお願いします。

【前提】ファイルサイズの計算式

前提としてファイルサイズ変換に必要な計算式を示します。この計算式に基づいてJavaScriptでプログラムを組んでいきます。今回はTB（テラバイト）は含めません。

  • 1KB（キロバイト） = 1024バイト
  • 1MB（メガバイト） = 1024KB（1024バイトの2乗）
  • 1GB（ギガバイト） = 1024MB（1024バイトの3乗）
  • 1TB（テラバイト） = 1024GB（1024バイトの4乗)

挙動

下記JSFiddleの[Result]より動作確認できます。「ファイルを選択」からローカルの画像ファイルを選択してください。

ファイルサイズ(バイト数)と、KB/MB/GBに変換された値が下側に表示されます。

コード解説

ファイル部品と、サイズ単位出力用のHTML

<div id="app">
  <div>
    <input
      type="file"
      @change="fileChange"
    >
    <p>バイト数: {{ byte_size }}</p>
    <p>変換後 : {{ convertSize() }} {{ convertUnit() }}</p>
  </div>
</div>

まずはHTML側でファイルアップロード用のinput部品と、サイズ・単位出力用にメソッドを埋め込みます。

convertSize() が変換後のサイズを出力し、convertUnit()が変換後の単位を出力します。

byte_sizeは、選択したファイルのバイト数が格納されます。

ファイルアップロード時の処理

fileChange() {
    this.byte_size = event.target.files[0].size
},

dataプロパティで定義したbyte_sizeに、選択したファイルのバイト数を格納します。

input[type=”file”]で選択されたファイルデータは、event.target.files[0]で取得できます。

単位の算出

convertUnit() {
    let unit = "B"
    const KB = 1024
    const MB = Math.pow(KB, 2)
    const GB = Math.pow(KB, 3)

    if( this.byte_size >= KB ) {
        this.applicable_unit = KB
        unit = 'KB'
    }
    if( this.byte_size >= MB ) {
        this.applicable_unit = MB
        unit = 'MB'
    }
    if( this.byte_size >= GB ) {
        this.applicable_unit = GB
        unit = 'KB'
    }

    return unit ? unit : ""
},

選択されたファイルのバイト数を基準に、適切な単位を判定します。

ここで冒頭で記載した、ファイルサイズ変換の計算式の出番です。

  • 1KB（キロバイト） = 1024バイト
  • 1MB（メガバイト） = 1024KB（1024バイトの2乗）
  • 1GB（ギガバイト） = 1024MB（1024バイトの3乗）
  • 1TB（テラバイト） = 1024GB（1024バイトの4乗)
const KB = 1024
const MB = Math.pow(KB, 2)
const GB = Math.pow(KB, 3)

1024バイト以上をキロバイト(KB)とし、MB・GBはそれぞれ1024の2乗、3乗で算出します。

次に、選択されたファイルサイズのバイト数がKB・MB・GBどれに該当するのかを判定します。

if( this.byte_size >= KB ) {
    this.applicable_unit = KB
    unit = 'KB'
}
if( this.byte_size >= MB ) {
    this.applicable_unit = MB
    unit = 'MB'
}
if( this.byte_size >= GB ) {
    this.applicable_unit = GB
    unit = 'KB'
}

ファイルのバイト数が、定数(const)KB = 1024以上なら単位はKB。

ファイルのバイト数が、定数(const)MB = 1024 * 1024以上なら単位はMB。

ファイルのバイト数が、定数(const)GB = 1024 * 1024 * 1024以上なら単位はGB。

this.applicable_unitには、該当するファイルのバイト単位を格納します。次のファイルサイズ変換メソッドで使用します。

ファイルサイズの変換

convertSize() {
    let size = null
    if( this.applicable_unit ) {
        size =  Math.round( (this.byte_size / this.applicable_unit) * 10 ) / 10
    } else {
        size = this.byte_size
    }
    return size ? size : ""
},

単位の算出ができたので、最後にサイズ(数値)の変換を行います。

サイズの変換ロジックは下記。

Math.round( (this.byte_size / this.applicable_unit) * 10 ) / 10

Math.roundを使用して少数第二位を四捨五入する仕様にしました。

if( this.applicable_unit ) {

} else {

}

上記のように条件式を記載していますが、KB・MB・GBの場合はthis.applicable_unitに変換用のバイト単位が格納されています。しかし、バイト数が1024未満だった場合はバイト数をそのまま返します。

【Vue.js】enter押出でフォームを送信する方法（全角入力・変換対応） 前の記事 【JavaScript】unixtimeを日付・日時に変換する方法 次の記事

関連記事

コメント

この記事へのコメントはありません。