Vue 3 中可用 computed 结合 formatFileSize 函数将字节数自动转换为 KiB/MB/GB 等易读格式，按 1024 逐级换算，支持自定义小数位与单位数组，响应式更新且可复用。
在 Vue 3 中，可以用 computed 将文件大小（单位：字节 Byte）自动转换为更易读的格式（如 KB、MB、GB），并根据数值动态选择最合适的单位。关键在于逻辑清晰、避免硬编码、兼顾可读性和精度。
基础换算逻辑与单位选择
文件大小换算是典型的数量级判断问题：1 KB = 1024 B，1 MB = 1024 KB，1 GB = 1024 MB。推荐使用二进制单位（IEC 标准），即 KiB/MiB/GiB，但日常显示常简写为 KB/MB/GB。核心是按 1024 逐级除，直到值
- 小于 1024 → 单位 B，保留整数
- 1024 ~ 1048575（
- 1048576 ~ 1073741823（
- ≥ 1073741824 → 转 GB，保留 1 位小数（可继续扩展到 TB）
在 setup 中定义响应式 computed
假设你有一个响应式文件对象 file（含 size 字段，单位为 Byte），可在 setup() 中这样写：
import { computed } from 'vue'
<p>export default {
setup() {
const file = reactive({ size: 2560000 }) // 示例：约 2.44 MB</p><pre class="brush:php;toolbar:false;">const formattedSize = computed(() => {
const bytes = file.size
if (bytes === 0) return '0 B'
const k = 1024
const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
const rounded = parseFloat((bytes / Math.pow(k, i)).toFixed(1))
return `${rounded} ${sizes[i]}`
})
return { formattedSize }} }
✅ 优点：简洁、自动适配、支持响应式更新；⚠️ 注意：Math.log(0) 会返回 -Infinity，所以需前置判断 bytes === 0。
增强版：支持自定义精度与单位别名
若需更高灵活性（如统一保留 2 位小数、用 MiB 替代 MB），可封装成可复用函数：
const formatFileSize = (bytes, options = {}) => {
const { decimal = 1, units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'] } = options
if (bytes === 0) return `0 ${units[0]}`
const k = 1024
const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), units.length - 1)
const val = parseFloat((bytes / Math.pow(k, i)).toFixed(decimal))
return `${val} ${units[i]}`
}
<p>// 在 setup 中使用
const formattedSize = computed(() => formatFileSize(file.size, { decimal: 2 }))</p>
这样既保持 computed 的响应性，又便于多处复用或配置调整。
模板中直接使用
在模板里直接绑定即可，无需额外方法：
<template><p>文件大小：{{ formattedSize }}</p>
</template>
当 file.size 变化时，formattedSize 自动重新计算，无副作用、无手动触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
