소스 검색

1.封装根据字节大小自动选择最合适的位方法
2.上传组件新加文件大小功能

Qukatie 1 주 전
부모
커밋
14bf49166b
2개의 변경된 파일136개의 추가작업 그리고 15개의 파일을 삭제
  1. 38 15
      src/components/uploadFile/index.vue
  2. 98 0
      src/util/byteConverter.js

+ 38 - 15
src/components/uploadFile/index.vue

@@ -31,6 +31,9 @@
           {{ row.fileUrl }}
         </span>
       </template>
+      <template slot="fileSize" slot-scope="{ row, index }">
+        <span>{{ formatByte(row.fileSize) }}</span>
+      </template>
       <template slot="menu" slot-scope="{ row, index }">
         <el-button size="small" type="text" icon="el-icon-edit" :disabled="disabled" @click="rowEdit(row)">{{
           row.$cellEdit ? "保存" : "编辑"
@@ -49,6 +52,7 @@
 import { getToken } from "@/util/auth";
 import { updateListRemove, submitList } from "@/api/uploadFile/upload-file";
 import PreviewImage from "@/components/PreviewImage/index.vue";
+import byteConverter from "@/util/byteConverter";
 export default {
   name: "detailsPage",
   components: { PreviewImage },
@@ -87,21 +91,26 @@ export default {
             prop: "fileProperties",
             overHidden: true,
             cell: true,
-            type: 'select',
-            dicData:[{
-              label:'鼓包并向照片',
-              value:1
-            },{
-              label:'轮胎DOT',
-              value:2
-            },{
-              label:'车头照片',
-              value:3
-            },{
-              label:'鼓包处照片',
-              value:4
-            }],
-            hide:!this.filePropertiesHide
+            type: "select",
+            dicData: [
+              {
+                label: "鼓包并向照片",
+                value: 1,
+              },
+              {
+                label: "轮胎DOT",
+                value: 2,
+              },
+              {
+                label: "车头照片",
+                value: 3,
+              },
+              {
+                label: "鼓包处照片",
+                value: 4,
+              },
+            ],
+            hide: !this.filePropertiesHide,
           },
           {
             label: "文件地址",
@@ -116,6 +125,12 @@ export default {
             overHidden: true,
           },
           {
+            label: "文件大小",
+            prop: "fileSize",
+            // cell: true,
+            overHidden: true,
+          },
+          {
             label: "备注",
             prop: "remarks",
             cell: true,
@@ -156,6 +171,10 @@ export default {
   },
   created() {},
   methods: {
+    //转换字节方法
+    formatByte(num) {
+      return byteConverter.formatBytes(num)
+    },
     /**
      * @param {any} list
      */
@@ -244,11 +263,14 @@ export default {
      * @param {any} fileList
      */
     onSuccess(res, file, fileList) {
+      
+      console.log(res,file)
       this.data.push({
         pid: this.pId ? this.pId : null,
         fileName: res.data.originalName,
         fileUrl: res.data[this.linkKey],
         fileType: this.getFileExtension(res.data.originalName),
+        fileSize:file.size,
         $cellEdit: true,
       });
     },
@@ -256,6 +278,7 @@ export default {
       this.data[this.rowIndex].fileName = res.data.originalName;
       this.data[this.rowIndex].fileUrl = res.data[this.linkKey];
       this.data[this.rowIndex].fileType = this.getFileExtension(res.data.originalName);
+      this.data[this.rowIndex].fileSize =file.size;
     },
     rowPick(row, index) {
       console.log(row, index);

+ 98 - 0
src/util/byteConverter.js

@@ -0,0 +1,98 @@
+
+/**
+ * 字节单位转换工具类
+ * 提供字节到KB、MB、GB等单位的转换方法
+ */
+
+export default class ByteConverter {
+  /**
+   * 将字节转换为KB,保留两位小数
+   * @param {number} bytes - 字节数
+   * @param {number} decimalPlaces - 小数位数,默认2位
+   * @returns {number} 转换后的KB数值
+   */
+  static bytesToKB(bytes, decimalPlaces = 2) {
+    if (typeof bytes !== 'number' || bytes < 0) {
+      console.warn('字节数必须为非负数');
+      return 0;
+    }
+    
+    const kb = bytes / 1024;
+    return Number(kb.toFixed(decimalPlaces));
+  }
+
+  /**
+   * 将字节转换为MB,保留两位小数
+   * @param {number} bytes - 字节数
+   * @param {number} decimalPlaces - 小数位数,默认2位
+   * @returns {number} 转换后的MB数值
+   */
+  static bytesToMB(bytes, decimalPlaces = 2) {
+    if (typeof bytes !== 'number' || bytes < 0) {
+      console.warn('字节数必须为非负数');
+      return 0;
+    }
+    
+    const mb = bytes / (1024 * 1024);
+    return Number(mb.toFixed(decimalPlaces));
+  }
+
+  /**
+   * 将字节转换为GB,保留两位小数
+   * @param {number} bytes - 字节数
+   * @param {number} decimalPlaces - 小数位数,默认2位
+   * @returns {number} 转换后的GB数值
+   */
+  static bytesToGB(bytes, decimalPlaces = 2) {
+    if (typeof bytes !== 'number' || bytes < 0) {
+      console.warn('字节数必须为非负数');
+      return 0;
+    }
+    
+    const gb = bytes / (1024 * 1024 * 1024);
+    return Number(gb.toFixed(decimalPlaces));
+  }
+
+  /**
+   * 智能转换 - 根据字节大小自动选择最合适的单位
+   * @param {number} bytes - 字节数
+   * @param {number} decimalPlaces - 小数位数,默认2位
+   * @returns {object} 包含数值和单位的对象
+   */
+  static smartConvert(bytes, decimalPlaces = 2) {
+    if (typeof bytes !== 'number' || bytes < 0) {
+      console.warn('字节数必须为非负数');
+      return { value: 0, unit: 'B' };
+    }
+
+    if (bytes < 1024) {
+      return { value: bytes, unit: 'B' };
+    } else if (bytes < 1024 * 1024) {
+      return { 
+        value: this.bytesToKB(bytes, decimalPlaces), 
+        unit: 'KB' 
+      };
+    } else if (bytes < 1024 * 1024 * 1024) {
+      return { 
+        value: this.bytesToMB(bytes, decimalPlaces), 
+        unit: 'MB' 
+      };
+    } else {
+      return { 
+        value: this.bytesToGB(bytes, decimalPlaces), 
+        unit: 'GB' 
+      };
+    }
+  }
+
+  /**
+   * 格式化显示 - 返回带单位的字符串
+   * @param {number} bytes - 字节数
+   * @param {number} decimalPlaces - 小数位数,默认2位
+   * @returns {string} 格式化后的字符串
+   */
+  static formatBytes(bytes, decimalPlaces = 2) {
+    const result = this.smartConvert(bytes, decimalPlaces);
+    return `${result.value} ${result.unit}`;
+  }
+}