feat(upload): 增加 clearFiles、addFile、removeFile 方法，支持覆盖上传 (#482)

* docs(upload): 文档规范 * feat(upload): 增加 clearFiles、handleUploadFile、handleRemoveFile 方法 * refactor(upload): 命名规范
WeBankFinTech · Oct 7, 2023 · a91a18a · a91a18a
1 parent 217963f
commit a91a18a
Show file tree

Hide file tree

Showing 12 changed files with 233 additions and 25 deletions.
diff --git a/components/upload/upload.tsx b/components/upload/upload.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, SetupContext } from 'vue';
 import { useTheme } from '../_theme/useTheme';
 import Trigger from './trigger.vue';
 import FileList from './fileList.vue';
@@ -81,7 +81,9 @@ export default defineComponent({
     ],
     setup(props, ctx) {
         useTheme();
-        const { uploadFiles, isDragger } = useUpload(props, ctx.emit);
+        const { uploadFiles, isDragger, clearFiles, addFile, removeFile } =
+            useUpload(props, ctx.emit);
+
         const getFileList = () => {
             if (!props.showFileList) {
                 return null;
@@ -93,6 +95,13 @@ export default defineComponent({
             }
             return fileListSlots({ uploadFiles: uploadFiles.value });
         };
+
+        (ctx as SetupContext).expose?.({
+            clearFiles,
+            addFile,
+            removeFile,
+        });
+
         return () => {
             return (
                 <>

diff --git a/components/upload/useUpload.ts b/components/upload/useUpload.ts
@@ -28,7 +28,9 @@ export default (props: UploadProps, emit: any) => {
     }>({});
     let tempIndex = 1;
 
-    const [uploadFiles] = useNormalModel(props, emit, { prop: 'fileList' });
+    const [uploadFiles, updateUploadFiles] = useNormalModel(props, emit, {
+        prop: 'fileList',
+    });
 
     function initFile(rawFile: UploadFile) {
         const uid = genUid(tempIndex++);
@@ -286,8 +288,35 @@ export default (props: UploadProps, emit: any) => {
         },
     );
 
+    function clearFiles() {
+        updateUploadFiles([]);
+    }
+    function addFile(rawFile: UploadFile) {
+        if (!rawFile) {
+            return;
+        }
+        if (
+            props.multipleLimit &&
+            props.fileList.length + 1 > props.multipleLimit
+        ) {
+            onExceed([rawFile]);
+            return;
+        }
+        onStart(rawFile);
+        upload(rawFile);
+    }
+    function removeFile(file: FileItem) {
+        if (!file) {
+            return;
+        }
+        onRemove(null, file);
+    }
+
     return {
         uploadFiles,
         isDragger,
+        clearFiles,
+        addFile,
+        removeFile,
     };
 };
diff --git a/docs/.vitepress/components/upload/common.vue b/docs/.vitepress/components/upload/common.vue
@@ -22,6 +22,7 @@
 </template>
 <script>
 import { ref } from 'vue';
+import { FMessage } from '@fesjs/fes-design';
 
 export default {
     setup() {
@@ -57,17 +58,20 @@ export default {
                 ' fileList.value:',
                 fileList.value,
             );
+            FMessage.error('文件上传失败');
         };
         const exceed = (param) => {
             console.log('[upload.common] [exceed] param:', param);
+            FMessage.warning('文件上传超限');
         };
         const progress = (param) => {
             console.log('[upload.common] [progress] param:', param);
         };
         const beforeUpload = async (file) => {
             console.log('[upload.common] [beforeUpload] file:', file);
-            if (file.size > 500 * 1024) {
+            if (file.size > 50 * 1024) {
                 console.log('[upload.common] [beforeUpload] 超出5KB,无法上传!');
+                FMessage.warning('超出50KB,无法上传!');
                 return false;
             }
             return true;

diff --git a/docs/.vitepress/components/upload/customerUpload.vue b/docs/.vitepress/components/upload/customerUpload.vue
@@ -1,9 +1,9 @@
 <template>
     <FUpload
+        v-model:fileList="fileList"
         action="https://run.mocky.io/v3/2d9d9844-4a46-4145-8f57-07e13768f565"
         multiple
         :multipleLimit="4"
-        :fileList="fileList"
         :accept="accept"
         :beforeUpload="beforeUpload"
         :httpRequest="customRequest"
@@ -23,6 +23,7 @@
 </template>
 <script>
 import { ref } from 'vue';
+import { FMessage } from '@fesjs/fes-design';
 
 export default {
     setup() {
@@ -61,19 +62,22 @@ export default {
         };
         const error = (param) => {
             console.log('[upload.customerUpload] [error] param:', param);
+            FMessage.error('文件上传失败');
         };
         const exceed = (param) => {
             console.log('[upload.customerUpload] [exceed] param:', param);
+            FMessage.warning('文件上传超限');
         };
         const progress = (param) => {
             console.log('[upload.customerUpload] [progress] param:', param);
         };
         const beforeUpload = async (file) => {
             console.log('[upload.customerUpload] [beforeUpload] file:', file);
-            if (file.size > 500 * 1024) {
+            if (file.size > 5 * 1024) {
                 console.log(
                     '[upload.customerUpload] [beforeUpload] 超出5KB,无法上传!',
                 );
+                FMessage.warning('超出5KB,无法上传!');
                 return false;
             }
             return true;

diff --git a/docs/.vitepress/components/upload/default.vue b/docs/.vitepress/components/upload/default.vue
@@ -1,9 +1,9 @@
 <template>
     <FUpload
+        v-model:fileList="fileList"
         action="https://run.mocky.io/v3/2d9d9844-4a46-4145-8f57-07e13768f565"
         multiple
         :multipleLimit="4"
-        :fileList="fileList"
         :accept="accept"
         :beforeUpload="beforeUpload"
         @change="change"
@@ -18,6 +18,7 @@
 </template>
 <script>
 import { ref } from 'vue';
+import { FMessage } from '@fesjs/fes-design';
 
 export default {
     setup() {
@@ -56,19 +57,22 @@ export default {
         };
         const error = (param) => {
             console.log('[upload.default] [error] param:', param);
+            FMessage.error('文件上传失败');
         };
         const exceed = (param) => {
             console.log('[upload.default] [exceed] param:', param);
+            FMessage.warning('文件上传超限');
         };
         const progress = (param) => {
             console.log('[upload.default] [progress] param:', param);
         };
         const beforeUpload = async (file) => {
             console.log('[upload.default] [beforeUpload] file:', file);
-            if (file.size > 500 * 1024) {
+            if (file.size > 5 * 1024) {
                 console.log(
                     '[upload.default] [beforeUpload] 超出5KB,无法上传!',
                 );
+                FMessage.warning('超出5KB,无法上传!');
                 return false;
             }
             return true;

diff --git a/docs/.vitepress/components/upload/drag.vue b/docs/.vitepress/components/upload/drag.vue
@@ -1,9 +1,9 @@
 <template>
     <FUpload
+        v-model:fileList="fileList"
         action="https://run.mocky.io/v3/2d9d9844-4a46-4145-8f57-07e13768f565"
         multiple
         :multipleLimit="4"
-        :fileList="fileList"
         :accept="accept"
         :beforeUpload="beforeUpload"
         @change="change"
@@ -18,6 +18,7 @@
 </template>
 <script>
 import { ref } from 'vue';
+import { FMessage } from '@fesjs/fes-design';
 
 export default {
     setup() {
@@ -35,17 +36,20 @@ export default {
         };
         const error = (param) => {
             console.log('[upload.drag] [error] param:', param);
+            FMessage.error('文件上传失败');
         };
         const exceed = (param) => {
             console.log('[upload.drag] [exceed] param:', param);
+            FMessage.warning('文件上传超限');
         };
         const progress = (param) => {
             console.log('[upload.drag] [progress] param:', param);
         };
         const beforeUpload = async (file) => {
             console.log('[upload.drag] [beforeUpload] file:', file);
-            if (file.size > 500 * 1024) {
+            if (file.size > 5 * 1024) {
                 console.log('[upload.drag] [beforeUpload] 超出5KB,无法上传!');
+                FMessage.warning('超出5KB,无法上传!');
                 return false;
             }
             return true;

diff --git a/docs/.vitepress/components/upload/fileList.vue b/docs/.vitepress/components/upload/fileList.vue
@@ -1,9 +1,9 @@
 <template>
     <FUpload
+        v-model:fileList="fileList"
         action="https://run.mocky.io/v3/2d9d9844-4a46-4145-8f57-07e13768f565"
         multiple
         :multipleLimit="4"
-        :fileList="fileList"
         :accept="accept"
         :beforeUpload="beforeUpload"
         @change="change"
@@ -27,6 +27,7 @@
 </template>
 <script>
 import { ref } from 'vue';
+import { FMessage } from '@fesjs/fes-design';
 
 export default {
     setup() {
@@ -65,19 +66,22 @@ export default {
         };
         const error = (param) => {
             console.log('[upload.fileList] [error] param:', param);
+            FMessage.error('文件上传失败');
         };
         const exceed = (param) => {
             console.log('[upload.fileList] [exceed] param:', param);
+            FMessage.warning('文件上传超限');
         };
         const progress = (param) => {
             console.log('[upload.fileList] [progress] param:', param);
         };
         const beforeUpload = async (file) => {
             console.log('[upload.fileList] [beforeUpload] file:', file);
-            if (file.size > 500 * 1024) {
+            if (file.size > 5 * 1024) {
                 console.log(
                     '[upload.fileList] [beforeUpload] 超出5KB,无法上传!',
                 );
+                FMessage.warning('超出5KB,无法上传!');
                 return false;
             }
             return true;

diff --git a/docs/.vitepress/components/upload/index.md b/docs/.vitepress/components/upload/index.md
@@ -14,39 +14,59 @@ app.use(FUpload);
 
 ### 通用用法
 
---COMMON
+:::demo
+common.vue
+:::
 
 ### 初始列表
 
---INITLIST
+:::demo
+initList.vue
+:::
 
 ### 自定义上传的触发器
 
---DEFAULT
+:::demo
+default.vue
+:::
 
 ### 拖拽上传
 
 当自定义上传触发器使用`FUploadDragger`时开启拖拽上传。
 
---DRAG
+:::demo
+drag.vue
+:::
 
 ### 自定义文件列表的显示
 
---FILELIST
+:::demo
+fileList.vue
+:::
 
 ### 禁用
 
---DISABLED
+:::demo
+disabled.vue
+:::
 
 ### 预览上传文件
 
---previewUpload
+:::demo
+previewUpload.vue
+:::
 
 ### 自定义 http request
 
---customerUpload
+:::demo
+customerUpload.vue
+:::
 
---CODE
+### 单个文件覆盖上传
+
+:::demo
+singleUpload.vue
+:::
 
 ## Upload Props
 
@@ -90,6 +110,14 @@ app.use(FUpload);
 | fileList | 自定义文件的展示, 参数为 { uploadFiles }     |
 | file     | 自定义上传后的文件展示, 参数为 { file }      |
 
+## Upload Methods
+
+| 名称       | 说明                 | 参数                          |
+| ---------- | -------------------- | ----------------------------- |
+| clearFiles | 清空已上传的文件列表 | () => void                    |
+| addFile    | 手动选择文件         | (rawFile: UploadFile) => void |
+| removeFile | 手动移除文件         | (file: FileItem) => void      |
+
 ## UploadDragger Props
 
 | 属性              | 说明                                                           | 类型                    | 默认值 |
@@ -114,6 +142,14 @@ interface FileItem {
 }
 ```
 
+### UploadFile
+
+```ts
+interface UploadFile extends File {
+    uid?: number | string;
+}
+```
+
 ### UploadProgressEvent
 
 ```ts