refactor: 优化oss下载进度提示

CHANGELOG.md

@@ -13,7 +13,7 @@
 - 字典新增对Number类型的支持 -> `getDictOptions('', true);`即可获取number类型的value
 - 文件上传 增加上传进度条 下方上传提示
 - 图片上传 增加上传进度条 下方上传提示
-- oss下载进度(已下载的KB 无法作为进度显示 total返回为null)
+- oss下载进度提示
 
 **BUG FIXES**
 

apps/web-antd/src/utils/file/index.ts

@@ -0,0 +1,31 @@
+/**
+ * 计算文件大小并以适当单位表示
+ *
+ * 此函数接收一个表示文件大小的数字（以字节为单位），并返回一个格式化后的字符串，
+ * 该字符串表示文件的大小，以最适合的单位（B, KB, MB, GB, TB）表示
+ *
+ * @param size 文件大小，以字节为单位
+ * @param isInteger 是否返回整数大小，默认为false如果设置为true，
+ *                    则返回的大小将不包含小数部分；如果为false，则根据单位的不同，
+ *                    返回最多3位小数的大小
+ * @returns 格式化后的文件大小字符串，如"4.5KB"或"3MB"
+ */
+export function calculateFileSize(size: number, isInteger = false) {
+  // 定义文件大小的单位数组
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  // 定义换算基数，1KB = 1024B，1MB = 1024KB，以此类推
+  const base = 1024;
+
+  // 初始化单位索引，初始值为0，即默认单位为B
+  let unitIndex = 0;
+  // 当文件大小大于等于基数且单位索引未超出单位数组范围时，循环进行单位转换
+  while (size >= base && unitIndex < units.length - 1) {
+    size /= base;
+    unitIndex++;
+  }
+
+  // 根据是否需要整数大小，确定输出的精度
+  const precision = isInteger ? 0 : Math.min(unitIndex, 3);
+  // 返回格式化后的文件大小字符串
+  return `${size.toFixed(precision)}${units[unitIndex]}`;
+}

apps/web-antd/src/views/system/oss/index.vue

@@ -30,6 +30,7 @@ import {
 } from '#/adapter/vxe-table';
 import { configInfoByKey } from '#/api/system/config';
 import { ossDownload, ossList, ossRemove } from '#/api/system/oss';
+import { calculateFileSize } from '#/utils/file';
 import { downloadByData } from '#/utils/file/download';
 
 import { columns, fallbackImageBase64, querySchema } from './data';
@@ -112,8 +113,13 @@ async function handleDownload(row: OssFile) {
   });
   try {
     const data = await ossDownload(row.ossId, (e) => {
+      // 计算下载进度
       const percent = Math.floor((e.loaded / e.total!) * 100);
-      downloadSize.value = `已下载: ${Math.floor(e.loaded / 1024)}KB / ${percent}%`;
+      // 已经下载
+      const current = calculateFileSize(e.loaded);
+      // 总大小
+      const total = calculateFileSize(e.total!);
+      downloadSize.value = `已下载: ${current}/${total} (${percent}%)`;
     });
     downloadByData(data, row.originalName);
     message.success('下载完成');