fix(Upload): 修复有自定义上传逻辑时，action 属性校验必填的报错 (#693)

WeBankFinTech · Mar 21, 2024 · f2c834d · f2c834d
1 parent 825ed7d
commit f2c834d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 13 deletions.
diff --git a/components/upload/upload.tsx b/components/upload/upload.tsx
@@ -7,7 +7,6 @@ import {
 import { useTheme } from '../_theme/useTheme';
 import Trigger from './trigger.vue';
 import FileList from './fileList.vue';
-import request from './ajax';
 import useUpload from './useUpload';
 
 import type { ExtractPublicPropTypes } from '../_util/interface';
@@ -65,7 +64,6 @@ export const uploadProps = {
     },
     httpRequest: {
         type: Function,
-        default: request,
     },
     transformResponse: Function,
 } as const satisfies ComponentObjectPropsOptions;

diff --git a/components/upload/useUpload.ts b/components/upload/useUpload.ts
@@ -4,6 +4,7 @@ import { noop, hasOwn } from '../_util/utils';
 import useFormAdaptor from '../_util/use/useFormAdaptor';
 import getPrefixCls from '../_util/getPrefixCls';
 import { useNormalModel } from '../_util/use/useModel';
+import defaultRequest from './ajax';
 import { key } from './const';
 
 import type { UploadProps } from './upload';
@@ -156,8 +157,10 @@ export default (props: UploadProps, emit: any) => {
         }
     }
 
+    const httpRequest = computed(() => props.httpRequest ?? defaultRequest);
+
     const post = (rawFile: UploadFile) => {
-        if (!props.action) {
+        if (!props.httpRequest && !props.action) {
             onRemove(rawFile);
             console.error('[FUpload] 需配置action地址，才能执行上传');
             return;
@@ -193,7 +196,7 @@ export default (props: UploadProps, emit: any) => {
                 delete requestList.value[uid];
             },
         };
-        const req = props.httpRequest(options);
+        const req = httpRequest.value(options);
         requestList.value[uid] = req;
         if (req instanceof Promise) {
             req.then(options.onSuccess, options.onError);

diff --git a/docs/.vitepress/components/upload/customerUpload.vue b/docs/.vitepress/components/upload/customerUpload.vue
@@ -102,14 +102,14 @@ export default {
                 if (options.transformResponse) {
                     res = options.transformResponse(res);
                 }
-                //  调用 onProgress 告知 upload 内部上传进度，这里只是 demo 实际请通知具体上传进度
+                // 调用 onProgress 告知 upload 内部上传进度，这里只是 demo 实际请通知具体上传进度
                 options.onProgress({
                     percent: 100,
                 });
                 // 调用 onSuccess 告知 upload 内部上传响应结果
                 options.onSuccess(res);
             } catch (e) {
-                // 调用 onSuccess 告知 upload 内部上传失败情况
+                // 调用 onError 告知 upload 内部上传失败情况
                 options.onError(e);
             }
 

diff --git a/docs/.vitepress/components/upload/index.md b/docs/.vitepress/components/upload/index.md
@@ -32,7 +32,7 @@ default.vue
 
 ### 拖拽上传
 
-当自定义上传触发器使用`FUploadDragger`时开启拖拽上传。
+当自定义上传触发器使用 `FUploadDragger` 时开启拖拽上传。
 
 :::demo
 drag.vue
@@ -103,12 +103,12 @@ singleUpload.vue
 
 ## Upload Slots
 
-| 名称     | 说明                                         |
-| -------- | -------------------------------------------- |
-| default  | 触发文件选择框的内容, 参数为 { uploadFiles } |
-| tip      | 提示说明文字                                 |
-| fileList | 自定义文件的展示, 参数为 { uploadFiles }     |
-| file     | 自定义上传后的文件展示, 参数为 { file }      |
+| 名称     | 说明                                           |
+|----------|----------------------------------------------|
+| default  | 触发文件选择框的内容, 参数为 `{ uploadFiles }` |
+| tip      | 提示说明文字                                   |
+| fileList | 自定义文件的展示, 参数为 `{ uploadFiles }`     |
+| file     | 自定义上传后的文件展示, 参数为 `{ file }`      |
 
 ## Upload Methods