feat: 上传进度显示

stories/UploadList.stories.ts

@@ -2,7 +2,7 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-08-16 17:33:41
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-08-18 17:21:51
+ * @LastEditTime: 2023-08-22 14:10:55
  * @FilePath: \vue3\stories\UploadList.stories.ts
  * @Description:
  *
@@ -11,8 +11,12 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import ThUploadList from '../packages/upload-list/index.vue'
 import avatar from './assets/avatar.jpeg'
 
+interface Config {
+  onUploadProgress: (e: Pick<ProgressEvent, 'loaded' | 'total'>) => void
+}
+
 // 模拟2秒钟的接口请求
-function request(formData: FormData) {
+function request(formData: FormData, config?: Config) {
   let name = '佚名文件'
   let url = avatar
   const fileName = formData.get('name')
@@ -25,14 +29,23 @@ function request(formData: FormData) {
     url = URL.createObjectURL(file)
   }
   return new Promise<FileVO>((resolve) => {
-    setTimeout(() => {
+    let loaded = 0
-      resolve({
+    const t = setInterval(() => {
-        id: Date.now(),
+      loaded += 100
-        name,
+      config && config.onUploadProgress && config.onUploadProgress({
-        url,
+        loaded,
-        createdBy: 'user',
+        total: 2000,
       })
-    }, 2000)
+      if (loaded === 2000) {
+        clearInterval(t)
+        resolve({
+          id: Date.now(),
+          name,
+          url,
+          createdBy: 'user',
+        })
+      }
+    }, 100)
   })
 }
 const meta = {