feat(FaFileUpload): 增加文件夹上传和自定义上传请求功能

Author: hooray

apps/example/src/views/component_example/file_upload/_demo2.vue

@@ -5,6 +5,21 @@ const files = ref<FileItem[]>([
   { name: 'logo.svg', size: 1024 * 1024, url: 'https://fantastic-admin.hurui.me/logo.svg' },
 ])
 
+function beforeUpload(file: File) {
+  const isPng = file.type === 'image/png'
+  const isLt200K = file.size <= 200 * 1024
+
+  if (!isPng) {
+    faToast.error('只能上传 PNG 文件')
+    return false
+  }
+  if (!isLt200K) {
+    faToast.error('文件大小不能超过 200KB')
+    return false
+  }
+  return true
+}
+
 function handleSuccess() {
   faToast.success('模拟上传成功')
 }
@@ -21,9 +36,8 @@ function handleClick(fileItem: FileItem) {
     v-model="files"
     action="/fake/upload"
     :after-upload="(response) => response.data.url"
+    :before-upload="beforeUpload"
     multiple
-    :ext="['png']"
-    :size="200 * 1024"
     :max="5"
     @on-success="handleSuccess"
     @on-click="handleClick"

apps/example/src/views/component_example/file_upload/_demo4.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { FileItem, FileUploadRequestOptions } from '@fantastic-admin/components'
+
+const files = ref<FileItem[]>([])
+
+async function httpRequest({ file, onProgress }: FileUploadRequestOptions) {
+  onProgress(30)
+  await new Promise(resolve => setTimeout(resolve, 300))
+  onProgress(100)
+
+  return {
+    url: URL.createObjectURL(file),
+    name: file.name,
+  }
+}
+
+function handleSuccess() {
+  faToast.success('自定义上传完成')
+}
+</script>
+
+<template>
+  <FaFileUpload
+    v-model="files"
+    :http-request="httpRequest"
+    :after-upload="response => response.url"
+    :max="3"
+    @on-success="handleSuccess"
+  />
+</template>

apps/example/src/views/component_example/file_upload/_demo5.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { FileItem, FileUploadRequestOptions } from '@fantastic-admin/components'
+
+const files = ref<FileItem[]>([])
+
+async function httpRequest({ file, onProgress }: FileUploadRequestOptions) {
+  onProgress(50)
+  await new Promise(resolve => setTimeout(resolve, 200))
+  onProgress(100)
+
+  return {
+    url: URL.createObjectURL(file),
+    name: file.name,
+  }
+}
+</script>
+
+<template>
+  <FaFileUpload
+    v-model="files"
+    directory
+    :max="0"
+    :http-request="httpRequest"
+    :after-upload="response => response.url"
+  />
+</template>

apps/example/src/views/component_example/file_upload/index.vue

@@ -2,6 +2,8 @@
 import Demo1 from './_demo1.vue'
 import Demo2 from './_demo2.vue'
 import Demo3 from './_demo3.vue'
+import Demo4 from './_demo4.vue'
+import Demo5 from './_demo5.vue'
 </script>
 
 <template>
@@ -16,5 +18,11 @@ import Demo3 from './_demo3.vue'
     <FaPageMain title="自定义显示" main-class="p-4">
       <Demo3 />
     </FaPageMain>
+    <FaPageMain title="自定义上传请求" main-class="p-4">
+      <Demo4 />
+    </FaPageMain>
+    <FaPageMain title="文件夹上传" main-class="p-4">
+      <Demo5 />
+    </FaPageMain>
   </div>
 </template>

packages/components/index.ts

@@ -11,7 +11,7 @@ export * from './src/drawer/index'
 export { default as FaDrawer } from './src/drawer/index.vue'
 export { default as FaDropdown } from './src/dropdown/index.vue'
 export { default as FaFileUpload } from './src/file-upload/index.vue'
-export type { FileItem } from './src/file-upload/index.vue'
+export type { FileItem, FileUploadRequestOptions } from './src/file-upload/index.vue'
 export { default as FaFixedBar } from './src/fixed-bar/index.vue'
 export { default as FaHoverCard } from './src/hover-card/index.vue'
 export { default as FaIcon } from './src/icon/index.vue'