From 51adb6b8a9911e8d64ef376b19a4aef900b52789 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=91=B8=E9=B1=BC=E5=8E=BB?=
 <1780903673@qq.com>
Date: Thu, 27 Mar 2025 21:45:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Upload=20=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E6=A0=B9=E6=8D=AE=E6=89=A9?=
 =?UTF-8?q?=E5=B1=95=E5=90=8D=E8=BF=87=E6=BB=A4=E6=96=87=E4=BB=B6=20(#980)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: #796,#581
---
 docs/component/upload.md                      | 15 +++++
 docs/component/use-upload.md                  | 55 ++++++++++---------
 src/pages/upload/Index.vue                    | 21 +++++++
 .../components/composables/useUpload.ts       | 29 +++++++---
 .../components/wd-upload/types.ts             | 28 +++++++---
 .../components/wd-upload/wd-upload.vue        |  5 +-
 6 files changed, 109 insertions(+), 44 deletions(-)

diff --git a/docs/component/upload.md b/docs/component/upload.md
index 13995d4c..17e24f16 100644
--- a/docs/component/upload.md
+++ b/docs/component/upload.md
@@ -601,6 +601,18 @@ const fileList = ref<UploadFile[]>([])
 const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload'
 ```
 
+## 根据文件拓展名过滤
+
+通过设置 `extension` 可以限制选择文件的格式。以下示例限制只能选择 jpg 和 png 格式的图片:
+
+```html
+<wd-upload
+  v-model:file-list="fileList"
+  :extension="['.jpg', '.png']"
+  action="https://mockapi.eolink.com/xxx"
+></wd-upload>
+```
+
 ## Attributes
 
 | 参数                          | 说明                                                                                                                                                                           | 类型                                   | 可选值                                         | 默认值                     | 最低版本         |
@@ -637,6 +649,7 @@ const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86e
 | successStatus                 | 接口响应的成功状态（statusCode）值                                                                                                                                             | number                                 | -                                              | 200                        | 1.3.4            |
 | auto-upload                   | 是否选择文件后自动上传。为 false 时应手动调用 submit() 方法开始上传                                                                                                            | boolean                                | -                                              | true                       | 1.3.8 |
 | upload-method                 | 自定义上传方法                                                                                                                                                     | UploadMethod                                | -                                              | -                       | 1.3.8 |
+| extension | 根据文件拓展名过滤(H5支持全部类型过滤,微信小程序支持all和file时过滤,其余平台不支持) | string[] | - | - | $LOWEST_VERSION$ |
 
 ## accept 的合法值
 
@@ -692,3 +705,5 @@ const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86e
 | custom-class         | 根节点样式类             | -        |
 | custom-evoke-class   | 自定义上传按钮样式类     | -        |
 | custom-preview-class | 自定义预览图片列表样式类 | -        |
+
+
diff --git a/docs/component/use-upload.md b/docs/component/use-upload.md
index cd1da9ab..d3c61af1 100644
--- a/docs/component/use-upload.md
+++ b/docs/component/use-upload.md
@@ -44,36 +44,37 @@ abort()
 
 ### 方法
 
-| 方法名 | 说明 | 参数 | 返回值 |
-|-------|------|------|--------|
-| startUpload | 开始上传文件 | file: UploadFileItem, options: UseUploadOptions | UniApp.UploadTask \| void |
-| abort | 中断上传 | task?: UniApp.UploadTask | void |
-| chooseFile | 选择文件 | options: ChooseFileOption | Promise<ChooseFile[]> |
+| 方法名 | 说明 | 参数 | 返回值 | 最低版本 |
+|-------|------|------|--------|---------|
+| startUpload | 开始上传文件 | file: UploadFileItem, options: UseUploadOptions | UniApp.UploadTask \| void | - |
+| abort | 中断上传 | task?: UniApp.UploadTask | void | - |
+| chooseFile | 选择文件 | options: ChooseFileOption | Promise<ChooseFile[]> | - |
 
 ### UseUploadOptions
 
-| 参数 | 说明 | 类型 | 默认值 |
-|-----|------|------|--------|
-| action | 上传地址 | string | - |
-| header | 请求头 | Record<string, any> | {} |
-| name | 文件对应的 key | string | 'file' |
-| formData | 其它表单数据 | Record<string, any> | {} |
-| fileType | 文件类型 | 'image' \| 'video' \| 'audio' | 'image' |
-| statusCode | 成功状态码 | number | 200 |
-| uploadMethod | 自定义上传方法 | UploadMethod | - |
-| onSuccess | 上传成功回调 | Function | - |
-| onError | 上传失败回调 | Function | - |
-| onProgress | 上传进度回调 | Function | - |
+| 参数 | 说明 | 类型 | 默认值 | 最低版本 |
+|-----|------|------|--------|---------|
+| action | 上传地址 | string | - | - |
+| header | 请求头 | Record<string, any> | {} | - |
+| name | 文件对应的 key | string | 'file' | - |
+| formData | 其它表单数据 | Record<string, any> | {} | - |
+| fileType | 文件类型 | 'image' \| 'video' \| 'audio' | 'image' | - |
+| statusCode | 成功状态码 | number | 200 | - |
+| uploadMethod | 自定义上传方法 | UploadMethod | - | - |
+| onSuccess | 上传成功回调 | Function | - | - |
+| onError | 上传失败回调 | Function | - | - |
+| onProgress | 上传进度回调 | Function | - | - |
 
 ### ChooseFileOption
 
-| 参数 | 说明 | 类型 | 默认值 |
-|-----|------|------|--------|
-| multiple | 是否支持多选文件 | boolean | false |
-| sizeType | 所选的图片的尺寸 | Array | ['original', 'compressed'] |
-| sourceType | 选择文件的来源 | Array | ['album', 'camera'] |
-| maxCount | 最大可选数量 | number | 9 |
-| accept | 接受的文件类型 | 'image' \| 'video' \| 'media' \| 'file' \| 'all' | 'image' |
-| compressed | 是否压缩视频 | boolean | true |
-| maxDuration | 视频最大时长(秒) | number | 60 |
-| camera | 摄像头朝向 | 'back' \| 'front' | 'back' |
+| 参数 | 说明 | 类型 | 默认值 | 最低版本 |
+|-----|------|------|--------|---------|
+| multiple | 是否支持多选文件 | boolean | false | - |
+| sizeType | 所选的图片的尺寸 | Array | ['original', 'compressed'] | - |
+| sourceType | 选择文件的来源 | Array | ['album', 'camera'] | - |
+| maxCount | 最大可选数量 | number | 9 | - |
+| accept | 接受的文件类型 | 'image' \| 'video' \| 'media' \| 'file' \| 'all' | 'image' | - |
+| compressed | 是否压缩视频 | boolean | true | - |
+| maxDuration | 视频最大时长(秒) | number | 60 | - |
+| camera | 摄像头朝向 | 'back' \| 'front' | 'back' | - |
+| extension | 根据文件拓展名过滤(H5支持全部类型过滤,微信小程序支持all和file时过滤,其余平台不支持) | string[] | - |
diff --git a/src/pages/upload/Index.vue b/src/pages/upload/Index.vue
index 586e555f..1ae58b10 100644
--- a/src/pages/upload/Index.vue
+++ b/src/pages/upload/Index.vue
@@ -92,6 +92,23 @@
         </template>
       </wd-upload>
     </demo-block>
+    <!-- #ifdef H5 || MP-WEIXIN -->
+    <demo-block title="根据扩展名过滤">
+      <!-- #ifdef H5 -->
+      <wd-upload v-model:file-list="fileList18" :extension="['.jpg', '.png']" :action="action"></wd-upload>
+      <view style="margin: 10px 0">选择视频时过滤mp4</view>
+      <wd-upload accept="video" v-model:file-list="fileList19" :extension="['.mp4']" :action="action"></wd-upload>
+      <view style="margin: 10px 0">上传所有类型文件时过滤.pdf和.docx</view>
+      <wd-upload accept="all" v-model:file-list="fileList21" :extension="['.pdf', '.docx']" :action="action"></wd-upload>
+      <!-- #endif -->
+      <!-- #ifdef MP-WEIXIN -->
+      <view style="margin-bottom: 10px">选择文件时过滤.txt文件</view>
+      <wd-upload accept="file" v-model:file-list="fileList19" :extension="['.txt']" :action="action"></wd-upload>
+      <view style="margin: 10px 0">选择所有文件时过滤.jpg和.mp4</view>
+      <wd-upload accept="all" v-model:file-list="fileList20" :extension="['.jpg', '.mp4']" :action="action"></wd-upload>
+      <!-- #endif -->
+    </demo-block>
+    <!-- #endif -->
   </page-wraper>
 </template>
 <script lang="ts" setup>
@@ -136,6 +153,10 @@ const fileList17 = ref<UploadFile[]>([
     url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg'
   }
 ])
+const fileList18 = ref<UploadFile[]>([])
+const fileList19 = ref<UploadFile[]>([])
+const fileList20 = ref<UploadFile[]>([])
+const fileList21 = ref<UploadFile[]>([])
 
 const upload14 = ref<UploadInstance>()
 
diff --git a/src/uni_modules/wot-design-uni/components/composables/useUpload.ts b/src/uni_modules/wot-design-uni/components/composables/useUpload.ts
index 0c951530..283e029e 100644
--- a/src/uni_modules/wot-design-uni/components/composables/useUpload.ts
+++ b/src/uni_modules/wot-design-uni/components/composables/useUpload.ts
@@ -44,6 +44,8 @@ export interface UseUploadOptions {
   onProgress?: (res: UniApp.OnProgressUpdateResult, file: UploadFileItem) => void
   // 是否自动中断之前的上传任务
   abortPrevious?: boolean
+  // 根据文件拓展名过滤(H5支持全部类型过滤,微信小程序支持all和file时过滤,其余平台不支持)
+  extension?: string[]
 }
 
 export function useUpload(): UseUploadReturn {
@@ -225,15 +227,19 @@ export function useUpload(): UseUploadReturn {
     accept,
     compressed,
     maxDuration,
-    camera
+    camera,
+    extension
   }: ChooseFileOption): Promise<ChooseFile[]> {
     return new Promise((resolve, reject) => {
       switch (accept) {
         case 'image':
           uni.chooseImage({
-            count: multiple ? Math.min(maxCount, 9) : 1,
+            count: multiple ? Math.min(maxCount || 9, 9) : 1, // 默认9,最大9
             sizeType,
             sourceType,
+            // #ifdef H5
+            extension,
+            // #endif
             success: (res) => resolve(formatImage(res)),
             fail: reject
           })
@@ -244,6 +250,9 @@ export function useUpload(): UseUploadReturn {
             compressed,
             maxDuration,
             camera,
+            // #ifdef H5
+            extension,
+            // #endif
             success: (res) => resolve(formatVideo(res)),
             fail: reject
           })
@@ -251,7 +260,7 @@ export function useUpload(): UseUploadReturn {
         // #ifdef MP-WEIXIN
         case 'media':
           uni.chooseMedia({
-            count: multiple ? Math.min(maxCount, 9) : 1,
+            count: multiple ? Math.min(maxCount || 9, 9) : 1, // 默认9,最大9
             sourceType,
             sizeType,
             camera,
@@ -262,8 +271,9 @@ export function useUpload(): UseUploadReturn {
           break
         case 'file':
           uni.chooseMessageFile({
-            count: multiple ? Math.min(maxCount, 100) : 1,
+            count: multiple ? Math.min(maxCount || 100, 100) : 1, // 默认100,最大100
             type: accept,
+            extension,
             success: (res) => resolve(res.tempFiles),
             fail: reject
           })
@@ -272,16 +282,18 @@ export function useUpload(): UseUploadReturn {
         case 'all':
           // #ifdef H5
           uni.chooseFile({
-            count: multiple ? Math.min(maxCount, 100) : 1,
+            count: multiple ? Math.min(maxCount || 100, 100) : 1, // 默认100,最大100
             type: accept,
+            extension,
             success: (res) => resolve(res.tempFiles as ChooseFile[]),
             fail: reject
           })
           // #endif
           // #ifdef MP-WEIXIN
           uni.chooseMessageFile({
-            count: multiple ? Math.min(maxCount, 100) : 1,
+            count: multiple ? Math.min(maxCount || 100, 100) : 1, // 默认100,最大100
             type: accept,
+            extension,
             success: (res) => resolve(res.tempFiles),
             fail: reject
           })
@@ -291,9 +303,12 @@ export function useUpload(): UseUploadReturn {
         default:
           // 默认选择图片
           uni.chooseImage({
-            count: multiple ? Math.min(maxCount, 9) : 1,
+            count: multiple ? Math.min(maxCount || 9, 9) : 1, // 默认9,最大9
             sizeType,
             sourceType,
+            // #ifdef H5
+            extension,
+            // #endif
             success: (res) => resolve(formatImage(res)),
             fail: reject
           })
diff --git a/src/uni_modules/wot-design-uni/components/wd-upload/types.ts b/src/uni_modules/wot-design-uni/components/wd-upload/types.ts
index edbe43d1..6cc93d9f 100644
--- a/src/uni_modules/wot-design-uni/components/wd-upload/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-upload/types.ts
@@ -5,27 +5,33 @@ import type { ImageMode } from '../wd-img/types'
 
 export interface ChooseFileOption {
   // 是否支持多选文件
-  multiple: boolean
+  multiple?: boolean
   // 所选的图片的尺寸
   sizeType?: UploadSizeType[]
   // 选择文件的来源
-  sourceType: UploadSourceType[]
+  sourceType?: UploadSourceType[]
   // 最大允许上传个数
-  maxCount: number
+  maxCount?: number
   // 接受文件类型
-  accept: UploadFileType
+  accept?: UploadFileType
   /**
    * 是否压缩视频，当 accept 为 video 时生效。
    */
-  compressed: boolean
+  compressed?: boolean
   /**
    * 拍摄视频最长拍摄时间，当 accept 为 video | media 时生效，单位秒。
    */
-  maxDuration: number
+  maxDuration?: number
   /**
    * 使用前置或者后置相机，当 accept 为 video | media 时生效，可选值为：back｜front。
    */
-  camera: UploadCameraType
+  camera?: UploadCameraType
+  /**
+   * 根据文件拓展名过滤,H5、微信小程序支持
+   * 每一项都不能是空字符串, 默认不过滤
+   * 例如: ['.jpg'] 表示只选择.jpg文件
+   */
+  extension?: string[]
 }
 
 export type UploadFileItem = {
@@ -330,7 +336,13 @@ export const uploadProps = {
    * 类型：UploadMethod
    * 默认值：-
    */
-  uploadMethod: Function as PropType<UploadMethod>
+  uploadMethod: Function as PropType<UploadMethod>,
+  /**
+   * 根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。
+   * H5支持全部类型过滤。
+   * 微信小程序支持all和file时过滤,其余平台不支持。
+   */
+  extension: Array as PropType<string[]>
 }
 
 export type UploadProps = ExtractPropTypes<typeof uploadProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue b/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue
index 107b4b8b..99e0a764 100644
--- a/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue
@@ -409,7 +409,7 @@ function handleProgress(res: UniApp.OnProgressUpdateResult, file: UploadFileItem
  * @description 选择文件的实际操作，将chooseFile自己用promise包了一层
  */
 function onChooseFile(currentIndex?: number) {
-  const { multiple, maxSize, accept, sizeType, limit, sourceType, compressed, maxDuration, camera, beforeUpload } = props
+  const { multiple, maxSize, accept, sizeType, limit, sourceType, compressed, maxDuration, camera, beforeUpload, extension } = props
 
   chooseFile({
     multiple,
@@ -419,7 +419,8 @@ function onChooseFile(currentIndex?: number) {
     accept,
     compressed,
     maxDuration,
-    camera
+    camera,
+    extension
   })
     .then((res) => {
       // 成功选择初始化file