实现 文件大小可读化 工具

分类：general ｜ 标签：文件、大小、可读 字节与友好显示互转

2.1 功能说明

字节与友好显示互转

2.1.1 使用指南

功能说明

将字节数转换为人类友好显示（B/KB/MB/GB/TB，二进制 1024 基准），也可反向输入带单位的大小转回字节。

使用场景

展示上传/下载体积、存储估算。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• toHuman()
• toBytes()
• clear()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const bytes = ref('')
const human = ref('')
const error = ref('')
const result = ref('')

const UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']

function toHuman() {
  error.value = result.value = ''
  const n = Number(bytes.value.trim())
  if (bytes.value.trim() === '' || isNaN(n) || n < 0) { error.value = '请输入有效字节数'; return }
  if (n < 1024) { human.value = n + ' B'; result.value = n + ' B'; return }
  let i = 0, v = n
  while (v >= 1024 && i < UNITS.length - 1) { v /= 1024; i++ }
  human.value = v.toFixed(2) + ' ' + UNITS[i]
  result.value = n + ' B = ' + human.value
}
function toBytes() {
  error.value = result.value = ''
  const m = human.value.trim().match(/^([\d.]+)\s*(B|KB|MB|GB|TB|PB)$/i)
  if (!m) { error.value = '格式如 1.5 MB'; return }
  const v = Number(m[1])
  const idx = UNITS.indexOf(m[2].toUpperCase())
  const n = Math.round(v * Math.pow(1024, idx))
  bytes.value = String(n)
  result.value = human.value.trim() + ' = ' + n + ' B'
}
function clear() { bytes.value = human.value = error.value = result.value = '' }

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/filesize-human