媒体库-批量下载

src/views/demo/system/mediaLibrary/index.vue

@@ -17,12 +17,24 @@
             <a-button :icon="h(BorderHorizontalOutlined)" @click="openComparisonModal">
               变化检测
             </a-button>
-            <a-button :icon="h(PlusOutlined)" type="primary" @click="addFolder">
-              新建文件夹
-            </a-button>
+            <a-button :icon="h(PlusOutlined)" @click="addFolder"> 新建文件夹 </a-button>
             <a-button :icon="h(ColumnHeightOutlined)" @click="moveFolderOrFile">移动</a-button>
             <a-button :icon="h(DeleteOutlined)" @click="deleteFolderOrFile">删除 </a-button>
-            <!-- <a-button :icon="h(DownloadOutlined)" @click="downloadFile">批量下载</a-button> -->
+            <a-popover trigger="hover">
+              <template #content>
+                <div v-if="!downloadLoading"> 选择下载的文件/文件夹，压缩下载成一个压缩包文件</div>
+                <div v-if="downloadLoading">
+                  <a-progress :percent="downPercent" type="circle" />
+                </div>
+              </template>
+              <a-button
+                :icon="h(DownloadOutlined)"
+                :loading="downloadLoading"
+                @click="downloadOpenMoadl"
+              >
+                批量下载
+              </a-button>
+            </a-popover>
             <a-radio-group v-model:value="tableType">
               <a-radio-button value="table"><BarsOutlined /></a-radio-button>
               <a-radio-button value="store"><AppstoreOutlined /></a-radio-button>
@@ -97,7 +109,15 @@
               <span
                 style="width: 100%; display: flex; align-items: center; justify-content: center"
               >
-                {{ record.size ? parseFloat((record.size / (1024 * 1024)).toFixed(2)) + 'M' : '-' }}
+                {{
+                  record.size
+                    ? record.size > 1024 * 1024
+                      ? parseFloat((record.size / (1024 * 1024)).toFixed(2)) + 'MB'
+                      : record.size > 1024
+                        ? parseFloat((record.size / 1024).toFixed(2)) + 'KB'
+                        : parseFloat(record.size) + 'B'
+                    : '-'
+                }}
               </span>
             </template>
             <template v-if="column.key === 'airLineName'">
@@ -284,6 +304,41 @@
       <Comparison @closeComparisonModal="closeComparisonModal" />
     </a-modal>
 
+    <!-- 下载文件命名窗口 -->
+    <a-modal
+      v-model:open="downloadOpen"
+      title="压缩"
+      width="30%"
+      :centered="true"
+      :closable="false"
+      :destroyOnClose="true"
+      :keyboard="false"
+      :mask="false"
+      :maskClosable="false"
+      @ok="downloadFile"
+      @cancel="((zipFileName = null), (downloadRows = []))"
+    >
+      <div style="width: 100%; margin: 10px; padding: 10px">
+        <a-row>
+          <a-col :span="24">
+            <div style="width: 100%; height: 40px">批量下载会先进行压缩成一个文件，后续再下载</div>
+          </a-col>
+          <a-col :span="4">
+            <div style="width: 100%"> 压缩包名称: </div>
+          </a-col>
+          <a-col :span="20">
+            <div style="width: 80%">
+              <a-input
+                v-model:value="zipFileName"
+                placeholder="请输入压缩文件的名称"
+                allowClear
+              ></a-input>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </a-modal>
+
     <Path
       v-if="pathDivShow"
       :pathDivShow="pathDivShow"
@@ -754,20 +809,43 @@
     });
   }
 
-  // 批量下载
-  async function downloadFile() {
+  // 压缩窗口
+  const downloadOpen = ref(false);
+  const downloadLoading = ref(false);
+  const downPercent = ref(0);
+  // 压缩文件名
+  let downloadRows: any = [];
+  const zipFileName = ref('');
+  // 批量下载-窗口
+  function downloadOpenMoadl() {
     // 获得所选
     let rows = getSelectRows();
     if (tableType.value == 'store') {
       rows = showTableData.value.filter((item) => item.checked);
     }
-    getFileList(rows).then(async (res) => {
+    if (rows.length == 0) {
+      return createMessage.warn('请选择一个或者多个文件/文件夹进行删除');
+    }
+    zipFileName.value = '压缩文件' + dayjs().format('YYYY-MM-DD HH:mm:ss');
+    if (floders.value.length > 1) {
+      zipFileName.value = floders.value[floders.value.length - 1].name;
+    }
+    if (rows.length == 1 && !rows[0].objectKey) {
+      zipFileName.value = rows[0].name;
+    }
+    downloadRows = rows;
+    downloadOpen.value = true;
+  }
+  // 批量下载-下载
+  async function downloadFile() {
+    downloadOpen.value = false;
+    downloadLoading.value = true;
+    getFileList(downloadRows).then(async (res) => {
       let filelist: any = res;
-      console.log(res);
-
       const token = localStorage.getItem('X-Token');
       const zip = new JSZip();
       // 添加文件到ZIP
+      let index = 0;
       for (const file of filelist) {
         try {
           const response = await fetch(file.url + '?t=' + Date.now(), {
@@ -783,55 +861,51 @@
           zip.file(`${file.path}/${file.name}`, blob, { binary: true });
         } catch (error) {
           console.error('请求失败:', error);
+        } finally {
+          index++;
+          downPercent.value = parseFloat(((index / filelist.length) * 100).toFixed(2));
         }
       }
       // 生成ZIP文件并触发下载
-      let zipFileName = '压缩文件';
       try {
         const blob = await zip.generateAsync({ type: 'blob' });
-        saveAs(blob, zipFileName + '.zip'); // 下载的ZIP文件名
+        saveAs(blob, zipFileName.value + '.zip'); // 下载的ZIP文件名
       } catch (error) {
         console.error('生成ZIP文件时出错:', error);
+      } finally {
+        downloadLoading.value = false;
       }
     });
   }
-
+  // 批量下载-数据
   async function getFileList(rows) {
-    let fileList: any = [];
-    let num = 0;
-    rows.forEach(async (item) => {
+    const filelist: any = [];
+    // 使用 for...of 配合 await
+    for (const item of rows) {
       if (item.objectKey) {
-        fileList.push({
+        // 直接文件
+        filelist.push({
           name: item.name,
           url: VITE_GLOB_MEDIALIBRARY_IMAGE_URL + item.objectKey,
           path: '',
         });
-        num++;
-        if (rows.length == num) {
-          console.log(fileList);
-          return fileList;
-        }
       } else {
-        await GetMediaFile({
+        // 文件夹：获取子文件
+        const res = await GetMediaFile({
           parentKey: item.id,
           page: 1,
           limit: 1000,
-        }).then((res) => {
-          res.items.forEach(async (r) => {
-            fileList.push({
-              name: r.name,
-              url: VITE_GLOB_MEDIALIBRARY_IMAGE_URL + r.objectKey,
-              path: item.name,
-            });
+        });
+        res.items.forEach((r) => {
+          filelist.push({
+            name: r.name,
+            url: VITE_GLOB_MEDIALIBRARY_IMAGE_URL + r.objectKey,
+            path: item.name, // 以文件夹名为路径
           });
-          num++;
-          if (rows.length == num) {
-            console.log(fileList);
-            return fileList;
-          }
         });
       }
-    });
+    }
+    return filelist;
   }
 
   // 查看弹窗----------------------------------------------------------------------------

src/views/demo/system/mediaLibrary/path/pathImageInfo.vue

@@ -24,34 +24,40 @@
       </div>
       <div class="titleTime">
         <ClockCircleOutlined />
+        &nbsp;&nbsp;
+        <span>
+          {{ dayjs(props.nowShowImageData.createTime).format('YYYY-MM-DD HH:mm:ss (UTCZ)') }}
+        </span>
+        &nbsp;&nbsp;&nbsp;
         <span>
           {{
-            '&nbsp;&nbsp;' +
-            dayjs(props.nowShowImageData.createTime).format('YYYY-MM-DD HH:mm:ss (UTCZ)') +
-            '&nbsp;&nbsp;&nbsp;'
-          }}
-        </span>
-        <span>
-          {{
-            props.nowShowImageData.siz
-              ? (props.nowShowImageData.size / 1024 / 1024).toFixed(2) + 'M' + '&nbsp;&nbsp;&nbsp;'
-              : imageSize + '&nbsp;&nbsp;&nbsp;'
+            props.nowShowImageData.size
+              ? props.nowShowImageData.size > 1024 * 1024
+                ? parseFloat((props.nowShowImageData.size / (1024 * 1024)).toFixed(2)) + 'MB'
+                : props.nowShowImageData.size > 1024
+                  ? parseFloat((props.nowShowImageData.size / 1024).toFixed(2)) + 'KB'
+                  : parseFloat(props.nowShowImageData.size) + 'B'
+              : imageSize
           }}
         </span>
+        &nbsp;&nbsp;&nbsp;
         <span>
           {{ props.nowShowImageData.width + ' x ' + props.nowShowImageData.height }}
         </span>
       </div>
       <div class="titleCoordinate">
         <span>
-          {{ props.nowShowImageData.lat + '° E' + '&nbsp;&nbsp;&nbsp;&nbsp;' }}
+          {{ props.nowShowImageData.lat + '° E' }}
         </span>
+        &nbsp;&nbsp;&nbsp;&nbsp;
         <span>
-          {{ props.nowShowImageData.lng + '° N' + '&nbsp;&nbsp;&nbsp;&nbsp;' }}
+          {{ props.nowShowImageData.lng + '° N' }}
         </span>
+        &nbsp;&nbsp;&nbsp;&nbsp;
         <span>
-          {{ '拍摄高度' + props.nowShowImageData.relativeAltitude + 'm &nbsp;&nbsp;&nbsp;&nbsp;' }}
+          {{ '拍摄高度' + props.nowShowImageData.relativeAltitude + 'm' }}
         </span>
+        &nbsp;&nbsp;&nbsp;&nbsp;
       </div>
     </div>
     <!-- 标签 -->
@@ -865,8 +871,15 @@
       const contentLength = response.headers.get('Content-Length');
       if (contentLength) {
         const sizeInBytes = parseInt(contentLength, 10);
-        const sizeInMB = (sizeInBytes / (1024 * 1024)).toFixed(2);
-        imageSize.value = parseFloat(sizeInMB) + 'M';
+        if (sizeInBytes > 1024 * 1024) {
+          imageSize.value = (sizeInBytes / (1024 * 1024)).toFixed(2) + 'MB';
+        } else if (sizeInBytes > 1024) {
+          imageSize.value = (sizeInBytes / 1024).toFixed(2) + 'KB';
+        } else if (sizeInBytes > 0) {
+          imageSize.value = sizeInBytes + 'B';
+        } else {
+          imageSize.value = '--';
+        }
       } else {
         imageSize.value = '--';
       }

src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue

@@ -50,7 +50,11 @@
           <span class="infovalue">
             {{
               props.nowPreviewRecord.size
-                ? (props.nowPreviewRecord.size / 1024 / 1024).toFixed(2) + 'M'
+                ? props.nowPreviewRecord.size > 1024 * 1024
+                  ? parseFloat((props.nowPreviewRecord.size / (1024 * 1024)).toFixed(2)) + 'MB'
+                  : props.nowPreviewRecord.size > 1024
+                    ? parseFloat((props.nowPreviewRecord.size / 1024).toFixed(2)) + 'KB'
+                    : parseFloat(props.nowPreviewRecord.size) + 'B'
                 : imageSize
             }}
           </span>
@@ -402,8 +406,15 @@
       const contentLength = response.headers.get('Content-Length');
       if (contentLength) {
         const sizeInBytes = parseInt(contentLength, 10);
-        const sizeInMB = (sizeInBytes / (1024 * 1024)).toFixed(2);
-        imageSize.value = parseFloat(sizeInMB) + 'M';
+        if (sizeInBytes > 1024 * 1024) {
+          imageSize.value = (sizeInBytes / (1024 * 1024)).toFixed(2) + 'MB';
+        } else if (sizeInBytes > 1024) {
+          imageSize.value = (sizeInBytes / 1024).toFixed(2) + 'KB';
+        } else if (sizeInBytes > 0) {
+          imageSize.value = sizeInBytes + 'B';
+        } else {
+          imageSize.value = '--';
+        }
       } else {
         imageSize.value = '--';
       }