feat: oss下载进度(已下载的KB 无法作为进度显示 total返回为null)

CHANGELOG.md

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

apps/web-antd/src/api/system/oss/index.ts

@@ -1,3 +1,5 @@
+import type { AxiosRequestConfig } from '@vben/request';
+
 import type { OssFile } from './model';
 
 import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
@@ -48,13 +50,18 @@ export function ossUpload(file: Blob | File) {
 /**
  * 下载文件  返回为二进制
  * @param ossId ossId
+ * @param onDownloadProgress 下载进度(可选)
  * @returns blob
  */
-export function ossDownload(ossId: ID) {
+export function ossDownload(
+  ossId: ID,
+  onDownloadProgress?: AxiosRequestConfig['onDownloadProgress'],
+) {
   return requestClient.get<Blob>(`${Api.ossDownload}/${ossId}`, {
     responseType: 'blob',
     timeout: 30 * 1000,
     isTransformResponse: false,
+    onDownloadProgress,
   });
 }
 

apps/web-antd/src/views/system/oss/file-upload-modal.vue

@@ -45,6 +45,7 @@ const message = computed(() => {
         v-model:value="fileList"
         :accept="accept"
         :max-number="maxNumber"
+        :max-size="5"
       />
     </div>
   </BasicModal>

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

@@ -105,10 +105,18 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
 });
 
 async function handleDownload(row: OssFile) {
-  const hideLoading = message.loading($t('pages.common.downloadLoading'), 0);
+  const downloadSize = ref($t('pages.common.downloadLoading'));
+  const hideLoading = message.loading({
+    content: () => downloadSize.value,
+    duration: 0,
+  });
   try {
-    const data = await ossDownload(row.ossId);
+    const data = await ossDownload(row.ossId, (e) => {
+      // e.total这里为空 只能显示已经下载的
+      downloadSize.value = `已下载: ${Math.floor(e.loaded / 1024)}KB`;
+    });
     downloadByData(data, row.originalName);
+    message.success('下载完成');
   } finally {
     hideLoading();
   }