feat: 上传显示图片大小信息

ATQQ · Mar 4, 2024 · ca63513 · ca63513
1 parent 0a1100a
commit ca63513
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/packages/client/src/components/ImageList.vue b/packages/client/src/components/ImageList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { copyRes, formatDate } from '../utils/stringUtil';
+import { copyRes, formatDate, formatSize } from '../utils/stringUtil';
 import { Picture } from '@element-plus/icons-vue'
 import { useImageStore } from '@/store'
 import { computed } from 'vue';
@@ -25,7 +25,8 @@ const checkInfo = (image: IImage) => {
       <ul>
         <li>图片名：${image.name}</li>  
         <li>链接：<a target="_blank" href=${image.url}>${image.url}</a></li>  
-        <li>上传时间：${image.date && formatDate(image.date)}</li>  
+        <li>上传时间：${image.date && formatDate(image.date)}</li>
+        <li>大小：${image.size ? formatSize(image.size) : '未知'}</li>  
       </ul>
       </div>`
   })
@@ -55,6 +56,7 @@ const showImage = computed(() => {
             </a>
           </span>
           <span style="width: 160px;" class="right">
+            <el-button v-if="image.size" type="warning" link>{{ formatSize(image.size) }}</el-button>
             <el-button type="primary" link @click="checkInfo(image)">🔍</el-button>
             <el-button type="primary" link @click="copyAddress(image.url)">url</el-button>
             <el-button type="success" link @click="copyMdAddress(image.url)">markdown</el-button>

diff --git a/packages/client/src/components/ImageUpload.vue b/packages/client/src/components/ImageUpload.vue
@@ -49,7 +49,8 @@ watch(files, () => {
         imageStore.addImage({
           url: v,
           name: file.name || 'image',
-          file: file.raw
+          file: file.raw,
+          size: file.raw?.size || 0,
         })
       }).catch(err => {
         ElMessage.error(err)

diff --git a/packages/client/src/store/modules/imageStore.ts b/packages/client/src/store/modules/imageStore.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 
-export interface IImage { url: string, name: string, file?: File, date?: number }
+export interface IImage { url: string, name: string, file?: File, date?: number, size: number }
 
 const imgStore = defineStore('imgStore', {
   state: () => ({
@@ -13,6 +13,7 @@ const imgStore = defineStore('imgStore', {
     addImage(img: IImage) {
       img.date = Date.now()
       this.success.unshift(img)
+      // TODO: 使用其它的持久化存储，避免被清理或超出限制
       localStorage.setItem('upload-image', JSON.stringify(this.success, (key, value) => {
         if (key === 'file') {
           return

diff --git a/packages/client/src/utils/qiniu.ts b/packages/client/src/utils/qiniu.ts
@@ -12,6 +12,7 @@ async function uploadFile(file: File, qiniuOps: QiNiuConfig, options?: {
       fname: key,
       customVars: {},
     }
+    // TODO：限制上传文件大小，超过自动压缩等
     // 测试逻辑
     if (import.meta.env.VITE_APP_FAKE_UPLOAD) {
       let i = 0