fix(comp:upload): customRequest allows optional and async (#1340)

IDuxFE · Dec 9, 2022 · 52250a5 · 52250a5
1 parent 6eeffb8
commit 52250a5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/components/upload/docs/Api.zh.md b/packages/components/upload/docs/Api.zh.md
@@ -16,7 +16,7 @@
 | `progress` | 进度条配置，见 [ProgressProps](/components/progress/zh#ProgressProps) | `ProgressProps` | - | - | - |
 | `name` | 发到后台的文件参数名 | `string` | `file` | ✅  | - |
 | `withCredentials` | 请求是否携带cookie | `boolean` | `false` | ✅ | - |
-| `customRequest` | 覆盖内置的上传行为，自定义上传实现 | `(option: UploadRequestOption) => { abort: () => void }` | 基于XMLHttpRequest实现  | - | - |
+| `customRequest` | 覆盖内置的上传行为，自定义上传实现 | `(option: UploadRequestOption) => Promise<UploadRequestHandler \| void> \| UploadRequestHandler \| void` | 基于XMLHttpRequest实现  | - | - |
 | `requestData` | 上传附加的参数  | `Record<string, unknown> \| ((file: UploadFile) => Record<string, unknown> \| Promise<Record<string, unknown>>)` | - | - | - |
 | `requestHeaders` | 设置上传请求的请求头  | `UploadRequestHeader` | -  | -  | -  |
 | `requestMethod` | 上传请求的http method | `UploadRequestMethod` | `post` | ✅ | - |

diff --git a/packages/components/upload/src/composables/useRequest.ts b/packages/components/upload/src/composables/useRequest.ts
@@ -105,7 +105,8 @@ export function useRequest(props: UploadProps, files: ComputedRef<UploadFile[]>)
       })
     setFileStatus(file, 'uploading', props.onFileStatusChange)
     file.percent = 0
-    aborts.set(file.key, uploadHttpRequest(requestOption)?.abort ?? (() => {}))
+    const requestHandler = await uploadHttpRequest(requestOption)
+    aborts.set(file.key, requestHandler?.abort ?? (() => {}))
     fileUploading.value.push(file)
   }
 

diff --git a/packages/components/upload/src/types.ts b/packages/components/upload/src/types.ts
@@ -18,6 +18,9 @@ export type UploadRequestStatus = 'loadstart' | 'progress' | 'abort' | 'error' |
 export type UploadFileStatus = 'selected' | 'cancel' | 'uploading' | 'error' | 'success' | 'abort'
 export type UploadFilesType = 'text' | 'image' | 'imageCard'
 export type UploadIconType = 'file' | 'preview' | 'download' | 'remove' | 'retry'
+export interface UploadRequestHandler {
+  abort?: () => void
+}
 export interface UploadProgressEvent extends ProgressEvent {
   percent?: number
 }
@@ -88,7 +91,9 @@ export const uploadProps = {
   },
   progress: Object as PropType<ProgressProps>,
   name: String,
-  customRequest: Function as PropType<(option: UploadRequestOption<any>) => { abort: () => void }>,
+  customRequest: Function as PropType<
+    (option: UploadRequestOption<any>) => Promise<UploadRequestHandler | void> | UploadRequestHandler | void
+  >,
   withCredentials: {
     type: Boolean,
     default: undefined,