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

Author: hooray

apps/example/src/views/component_example/image_upload/_demo3.vue

@@ -1,6 +1,18 @@
 <script setup lang="ts">
 const files = ref<string[]>([])
 
+function beforeUpload(file: File) {
+  if (!file.type.startsWith('image/')) {
+    faToast.error('请选择图片文件')
+    return false
+  }
+  if (file.size > 200 * 1024) {
+    faToast.error('图片大小不能超过 200KB')
+    return false
+  }
+  return true
+}
+
 function handleSuccess() {
   faToast.success('模拟上传成功')
 }
@@ -11,11 +23,9 @@ function handleSuccess() {
     v-model="files"
     action="/fake/upload"
     :after-upload="(response) => `${response.data.url}?fake=${Math.random()}`"
+    :before-upload="beforeUpload"
     :width="200"
     :height="130"
-    :dimension="{ width: 400, height: 260 }"
-    :ext="['png']"
-    :size="200 * 1024"
     :max="0"
     @on-success="handleSuccess"
   >

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { UploadRequestOptions } from '@fantastic-admin/components'
+
+const files = ref<string[]>([])
+
+async function httpRequest({ file, onProgress }: UploadRequestOptions) {
+  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>
+  <FaImageUpload
+    v-model="files"
+    :http-request="httpRequest"
+    :after-upload="response => response.url"
+    :max="3"
+    @on-success="handleSuccess"
+  />
+</template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const files = ref<string[]>([])
+
+function beforeUpload(file: File) {
+  return file.type.startsWith('image/')
+}
+
+async function httpRequest({ file, onProgress }: {
+  file: File
+  onProgress: (percent: number) => void
+}) {
+  onProgress(50)
+  await new Promise(resolve => setTimeout(resolve, 200))
+  onProgress(100)
+
+  return {
+    url: URL.createObjectURL(file),
+    name: file.name,
+  }
+}
+</script>
+
+<template>
+  <FaImageUpload
+    v-model="files"
+    directory
+    :max="0"
+    :http-request="httpRequest"
+    :before-upload="beforeUpload"
+    :after-upload="response => response.url"
+  />
+</template>

apps/example/src/views/component_example/image_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>
@@ -13,8 +15,14 @@ import Demo3 from './_demo3.vue'
     <FaPageMain title="多图上传" main-class="p-4">
       <Demo2 />
     </FaPageMain>
-    <FaPageMain title="自定义默认内容、容器大小、建议尺寸、限制类型、不限制数量" main-class="p-4">
+    <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

@@ -17,6 +17,7 @@ export { default as FaHoverCard } from './src/hover-card/index.vue'
 export { default as FaIcon } from './src/icon/index.vue'
 export * from './src/image-preview/index'
 export { default as FaImagePreview } from './src/image-preview/index.vue'
+export type { UploadRequestOptions } from './src/image-upload/index.vue'
 export { default as FaImageUpload } from './src/image-upload/index.vue'
 export { default as FaInputOTP } from './src/input-otp/index.vue'
 export { default as FaInput } from './src/input/index.vue'