Skip to content

Commit 57d89f3

Browse files
MoonofweishengMoonofweisheng
committed
feat: ✨ Upload 上传组件调信小程序端使用chooseMedia替换掉chooseImage等
✅ Closes: #1193
1 parent 555ae5f commit 57d89f3

6 files changed

Lines changed: 271 additions & 12 deletions

File tree

‎docs/component/upload.md‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -655,12 +655,55 @@ const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86e
655655

656656
| name | 说明 | 最低版本 |
657657
| ----- | -------------------------------------------------------------------------------------- | -------- |
658-
| image | 图片，全平台支持 | - |
659-
| video | 视频，全平台支持 | 1.3.0 |
658+
| image | 图片，全平台支持，微信支持平台使用`chooseMedia`实现 | - |
659+
| video | 视频，全平台支持，微信支持平台使用`chooseMedia`实现 | 1.3.0 |
660660
| media | 图片和视频，仅微信支持，使用`chooseMedia`实现 | 1.3.0 |
661661
| file | 从客户端会话选择图片和视频以外的文件，仅微信支持，使用`chooseMessageFile`实现 | 1.3.0 |
662662
| all | 全部类型的文件，仅微信和 H5 支持，微信使用`chooseMessageFile`，H5 使用`chooseFile`实现 | 1.3.0 |
663663

664+
## 文件选择数量限制
665+
666+
不同平台的文件选择方法具有不同的最大选择数量限制，这些限制由 uni-app 平台 API 本身决定：
667+
668+
### 微信平台
669+
670+
微信小程序平台具有更丰富的文件选择能力和更高的数量上限：
671+
672+
| 选择方法 | 最大选择数量 | 说明 | 适用文件类型 |
673+
| -------- | ------------ | ---- | ------------ |
674+
| `chooseMedia` | 20 | 选择图片和视频时的最大数量限制 | accept 为 `image`、`video` 或 `media` 时使用 |
675+
| `chooseMessageFile` | 100 | 从客户端会话选择文件时的最大数量限制 | accept 为 `file` 或 `all` 时使用 |
676+
677+
### H5平台
678+
679+
H5 平台支持多种文件选择方式：
680+
681+
| 选择方法 | 最大选择数量 | 说明 | 适用文件类型 |
682+
| -------- | ------------ | ---- | ------------ |
683+
| `chooseImage` | 9 | 选择图片时的最大数量限制 | accept 为 `image` 时使用 |
684+
| `chooseVideo` | 1 | 不支持多选，只能选择单个视频文件 | accept 为 `video` 时使用 |
685+
| `chooseFile` | 100 | 选择文件时的最大数量限制 | accept 为 `all` 时使用 |
686+
687+
::: warning H5平台特别说明
688+
count 值在 H5 平台的表现基于浏览器本身的规范。目前测试结果来看，只能限制单选/多选，并不能限制具体数量。并且，在实际的手机浏览器中很少有能够支持多选的。
689+
:::
690+
691+
### 其他平台
692+
693+
其他平台（如支付宝小程序、钉钉小程序、App等）的文件选择能力相对有限：
694+
695+
| 选择方法 | 最大选择数量 | 说明 | 适用文件类型 |
696+
| -------- | ------------ | ---- | ------------ |
697+
| `chooseImage` | 9 | 选择图片时的最大数量限制 | accept 为 `image` 时使用 |
698+
| `chooseVideo` | 1 | 不支持多选，只能选择单个视频文件 | accept 为 `video` 时使用 |
699+
700+
::: tip 提示
701+
- 当设置的 `limit` 或 `maxCount` 超过上述平台限制时，实际选择数量将以平台限制为准
702+
- 微信小程序平台优先使用 `chooseMedia` 来选择图片和视频，具有更高的选择数量上限
703+
- 视频选择在非微信平台受限于 `chooseVideo` API，仅支持单选
704+
- 平台能力的优先级：微信平台 > H5平台 > 其他平台
705+
:::
706+
664707
## file 数据结构
665708

666709
| 键名 | 类型 | 说明 | 最低版本 |

‎docs/component/use-upload.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,39 @@ abort()
7878
| maxDuration | 视频最大时长(秒) | number | 60 | - |
7979
| camera | 摄像头朝向 | 'back' \| 'front' | 'back' | - |
8080
| extension | 根据文件拓展名过滤(H5支持全部类型过滤,微信小程序支持all和file时过滤,其余平台不支持) | string[] | - |
81+
82+
## 文件选择数量限制
83+
84+
不同平台对文件选择数量有不同的限制，这些限制由 uni-app 平台 API 本身决定：
85+
86+
### 微信平台
87+
88+
| 选择方法 | 最大数量 | 说明 | 适用场景 |
89+
|---------|---------|------|----------|
90+
| `chooseMedia` | 20 | 选择图片和视频时的最大数量限制 | accept 为 `image`、`video`、`media` 时使用 |
91+
| `chooseMessageFile` | 100 | 选择文件时的最大数量限制 | accept 为 `file`、`all` 时使用 |
92+
93+
### H5平台
94+
95+
| 选择方法 | 最大数量 | 说明 | 适用场景 |
96+
|---------|---------|------|----------|
97+
| `chooseImage` | 9 | 选择图片时的最大数量限制 | accept 为 `image` 时使用 |
98+
| `chooseVideo` | 1 | 不支持多选，只能选择单个视频文件 | accept 为 `video` 时使用 |
99+
| `chooseFile` | 100 | 选择文件时的最大数量限制 | accept 为 `all` 时使用 |
100+
101+
::: warning H5平台特别说明
102+
count 值在 H5 平台的表现基于浏览器本身的规范。目前测试结果来看，只能限制单选/多选，并不能限制具体数量。并且，在实际的手机浏览器中很少有能够支持多选的。
103+
:::
104+
105+
### 其他平台
106+
107+
| 选择方法 | 最大数量 | 说明 | 适用场景 |
108+
|---------|---------|------|----------|
109+
| `chooseImage` | 9 | 选择图片时的最大数量限制 | accept 为 `image` 时使用 |
110+
| `chooseVideo` | 1 | 不支持多选，只能选择单个视频文件 | accept 为 `video` 时使用 |
111+
112+
::: tip 提示
113+
- 微信平台优先使用 `chooseMedia` 和 `chooseMessageFile`，具有更高的选择数量限制
114+
- 视频选择在大多数平台都不支持多选
115+
- 实际可选择的数量还会受到 `maxCount` 参数的进一步限制
116+
:::

‎docs/en-US/component/upload.md‎

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,4 +97,66 @@ The upload component can limit the number of uploaded files by setting `limit`.
9797

9898
## Overwrite Upload
9999

100-
The upload component can automatically replace the previous file when selected by setting `reupload`.
100+
The upload component can automatically replace the previous file when selected by setting `reupload`.
101+
102+
```html
103+
<wd-upload
104+
:file-list="fileList"
105+
reupload
106+
action="https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload"
107+
@change="handleChange"
108+
></wd-upload>
109+
```
110+
111+
## Valid Values for accept
112+
113+
| name | Description | Minimum Version |
114+
| ----- | --------------------------------------------------------------------------------------------- | --------------- |
115+
| image | Images, supported on all platforms | - |
116+
| video | Videos, supported on all platforms | 1.3.0 |
117+
| media | Images and videos, WeChat only, implemented using `chooseMedia` | 1.3.0 |
118+
| file | Files other than images and videos from client sessions, WeChat only, implemented using `chooseMessageFile` | 1.3.0 |
119+
| all | All types of files, WeChat and H5 only, WeChat uses `chooseMessageFile`, H5 uses `chooseFile` | 1.3.0 |
120+
121+
## File Selection Quantity Limits
122+
123+
Different platforms have different file selection methods with varying maximum quantity limits, which are determined by the uni-app platform APIs:
124+
125+
### WeChat Platform
126+
127+
WeChat Mini Program platform offers richer file selection capabilities with higher quantity limits:
128+
129+
| Selection Method | Maximum Count | Description | Applicable File Types |
130+
| ---------------- | ------------- | ----------- | -------------------- |
131+
| `chooseMedia` | 20 | Maximum selection count for images and videos | Used when accept is `image`, `video`, or `media` |
132+
| `chooseMessageFile` | 100 | Maximum selection count for files from client sessions | Used when accept is `file` or `all` |
133+
134+
### H5 Platform
135+
136+
H5 platform supports multiple file selection methods:
137+
138+
| Selection Method | Maximum Count | Description | Applicable File Types |
139+
| ---------------- | ------------- | ----------- | -------------------- |
140+
| `chooseImage` | 9 | Maximum selection count for images | Used when accept is `image` |
141+
| `chooseVideo` | 1 | Does not support multiple selection, single video file only | Used when accept is `video` |
142+
| `chooseFile` | 100 | Maximum selection count for files | Used when accept is `all` |
143+
144+
::: warning H5 Platform Special Note
145+
The behavior of the count value on the H5 platform is based on the browser's own specifications. Current test results show that it can only limit single/multiple selection, but cannot limit the specific quantity. Moreover, very few mobile browsers actually support multiple selection.
146+
:::
147+
148+
### Other Platforms
149+
150+
Other platforms (such as Alipay Mini Program, DingTalk Mini Program, App, etc.) have relatively limited file selection capabilities:
151+
152+
| Selection Method | Maximum Count | Description | Applicable File Types |
153+
| ---------------- | ------------- | ----------- | -------------------- |
154+
| `chooseImage` | 9 | Maximum selection count for images | Used when accept is `image` |
155+
| `chooseVideo` | 1 | Does not support multiple selection, single video file only | Used when accept is `video` |
156+
157+
::: tip Tips
158+
- When the set `limit` or `maxCount` exceeds the above platform limits, the actual selection count will be subject to platform limits
159+
- WeChat Mini Program platform prioritizes using `chooseMedia` for selecting images and videos, which has higher selection count limits
160+
- Video selection on non-WeChat platforms is limited by the `chooseVideo` API and only supports single selection
161+
- Platform capability priority: WeChat Platform > H5 Platform > Other Platforms
162+
:::

‎docs/en-US/component/use-upload.md‎

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,4 +77,84 @@ abort()
7777
| compressed | Whether to compress video | boolean | true | - |
7878
| maxDuration | Maximum video duration (seconds) | number | 60 | - |
7979
| camera | Camera direction | 'back' \| 'front' | 'back' | - |
80-
| extension | Filter by file extension (H5 supports all type filtering, WeChat Mini Program supports filtering when all and file, other platforms do not support) | string[] | - |
80+
| extension | Filter by file extension (H5 supports all types, WeChat Mini Program supports filtering when all and file, other platforms do not support) | string[] | - |
81+
82+
## File Selection Quantity Limits
83+
84+
Different platforms have different limits on file selection quantity, which are determined by the uni-app platform APIs themselves:
85+
86+
### WeChat Platform
87+
88+
| Selection Method | Max Count | Description | Use Case |
89+
|-----------------|-----------|-------------|----------|
90+
| `chooseMedia` | 20 | Maximum selection count for images and videos | Used when accept is `image`, `video`, `media` |
91+
| `chooseMessageFile` | 100 | Maximum selection count for files | Used when accept is `file`, `all` |
92+
93+
### H5 Platform
94+
95+
| Selection Method | Max Count | Description | Use Case |
96+
|-----------------|-----------|-------------|----------|
97+
| `chooseImage` | 9 | Maximum selection count for images | Used when accept is `image` |
98+
| `chooseVideo` | 1 | Does not support multiple selection, single file only | Used when accept is `video` |
99+
| `chooseFile` | 100 | Maximum selection count for files | Used when accept is `all` |
100+
101+
::: warning H5 Platform Special Note
102+
The behavior of the count value on the H5 platform is based on the browser's own specifications. Current test results show that it can only limit single/multiple selection, but cannot limit the specific quantity. Moreover, very few mobile browsers actually support multiple selection.
103+
:::
104+
105+
### Other Platforms
106+
107+
| Selection Method | Max Count | Description | Use Case |
108+
|-----------------|-----------|-------------|----------|
109+
| `chooseImage` | 9 | Maximum selection count for images | Used when accept is `image` |
110+
| `chooseVideo` | 1 | Does not support multiple selection, single file only | Used when accept is `video` |
111+
112+
::: tip Tips
113+
- WeChat platform prioritizes `chooseMedia` and `chooseMessageFile`, which have higher selection count limits
114+
- Video selection does not support multiple selection on most platforms
115+
- The actual selectable quantity is further limited by the `maxCount` parameter
116+
:::
117+
118+
## File Selection Quantity Limits
119+
120+
Different platforms have different file selection methods with varying maximum quantity limits, which are determined by the uni-app platform APIs:
121+
122+
### WeChat Platform
123+
124+
WeChat Mini Program platform offers richer file selection capabilities with higher quantity limits:
125+
126+
| Selection Method | Maximum Count | Description | Applicable File Types |
127+
| ---------------- | ------------- | ----------- | -------------------- |
128+
| `chooseMedia` | 20 | Maximum selection count for images and videos | Used when accept is `image`, `video`, or `media` |
129+
| `chooseMessageFile` | 100 | Maximum selection count for files from client sessions | Used when accept is `file` or `all` |
130+
131+
### H5 Platform
132+
133+
H5 platform supports multiple file selection methods:
134+
135+
| Selection Method | Maximum Count | Description | Applicable File Types |
136+
| ---------------- | ------------- | ----------- | -------------------- |
137+
| `chooseImage` | 9 | Maximum selection count for images | Used when accept is `image` |
138+
| `chooseVideo` | 1 | Does not support multiple selection, single video file only | Used when accept is `video` |
139+
| `chooseFile` | 100 | Maximum selection count for files | Used when accept is `all` |
140+
141+
### Other Platforms
142+
143+
Other platforms (such as Alipay Mini Program, DingTalk Mini Program, App, etc.) have relatively limited file selection capabilities:
144+
145+
| Selection Method | Maximum Count | Description | Applicable File Types |
146+
| ---------------- | ------------- | ----------- | -------------------- |
147+
| `chooseImage` | 9 | Maximum selection count for images | Used when accept is `image` |
148+
| `chooseVideo` | 1 | Does not support multiple selection, single video file only | Used when accept is `video` |
149+
150+
::: tip Tips
151+
- When the set `maxCount` exceeds the above platform limits, the actual selection count will be subject to platform limits
152+
- The `chooseFile` function will automatically choose the optimal method based on platform capabilities
153+
- WeChat Mini Program platform prioritizes using `chooseMedia` for selecting images and videos, which has higher selection count limits
154+
- Video selection on non-WeChat platforms is limited by the `chooseVideo` API and only supports single selection
155+
- Platform capability priority: WeChat Platform > H5 Platform > Other Platforms
156+
:::
157+
158+
::: warning maxCount Parameter Limitation
159+
The `maxCount` parameter in `ChooseFileOption` is limited by the underlying platform APIs. Setting a value higher than the platform limit will be automatically capped to the maximum supported value.
160+
:::

‎src/uni_modules/wot-design-uni/components/composables/useUpload.ts‎

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -233,8 +233,20 @@ export function useUpload(): UseUploadReturn {
233233
return new Promise((resolve, reject) => {
234234
switch (accept) {
235235
case 'image':
236+
// #ifdef MP-WEIXIN
237+
uni.chooseMedia({
238+
count: multiple ? maxCount : 1,
239+
mediaType: ['image'],
240+
sourceType,
241+
sizeType,
242+
camera,
243+
success: (res) => resolve(formatMedia(res)),
244+
fail: reject
245+
})
246+
// #endif
247+
// #ifndef MP-WEIXIN
236248
uni.chooseImage({
237-
count: multiple ? Math.min(maxCount || 9, 9) : 1, // 默认9,最大9
249+
count: multiple ? maxCount : 1,
238250
sizeType,
239251
sourceType,
240252
// #ifdef H5
@@ -243,8 +255,21 @@ export function useUpload(): UseUploadReturn {
243255
success: (res) => resolve(formatImage(res)),
244256
fail: reject
245257
})
258+
// #endif
246259
break
247260
case 'video':
261+
// #ifdef MP-WEIXIN
262+
uni.chooseMedia({
263+
count: multiple ? maxCount : 1,
264+
mediaType: ['video'],
265+
sourceType,
266+
camera,
267+
maxDuration,
268+
success: (res) => resolve(formatMedia(res)),
269+
fail: reject
270+
})
271+
// #endif
272+
// #ifndef MP-WEIXIN
248273
uni.chooseVideo({
249274
sourceType,
250275
compressed,
@@ -256,11 +281,12 @@ export function useUpload(): UseUploadReturn {
256281
success: (res) => resolve(formatVideo(res)),
257282
fail: reject
258283
})
284+
// #endif
259285
break
260286
// #ifdef MP-WEIXIN
261287
case 'media':
262288
uni.chooseMedia({
263-
count: multiple ? Math.min(maxCount || 9, 9) : 1, // 默认9,最大9
289+
count: multiple ? maxCount : 1,
264290
sourceType,
265291
sizeType,
266292
camera,
@@ -271,7 +297,7 @@ export function useUpload(): UseUploadReturn {
271297
break
272298
case 'file':
273299
uni.chooseMessageFile({
274-
count: multiple ? Math.min(maxCount || 100, 100) : 1, // 默认100,最大100
300+
count: multiple ? (isDef(maxCount) ? maxCount : 100) : 1,
275301
type: accept,
276302
extension,
277303
success: (res) => resolve(res.tempFiles),
@@ -282,7 +308,7 @@ export function useUpload(): UseUploadReturn {
282308
case 'all':
283309
// #ifdef H5
284310
uni.chooseFile({
285-
count: multiple ? Math.min(maxCount || 100, 100) : 1, // 默认100,最大100
311+
count: multiple ? maxCount : 1,
286312
type: accept,
287313
extension,
288314
success: (res) => resolve(res.tempFiles as ChooseFile[]),
@@ -291,7 +317,7 @@ export function useUpload(): UseUploadReturn {
291317
// #endif
292318
// #ifdef MP-WEIXIN
293319
uni.chooseMessageFile({
294-
count: multiple ? Math.min(maxCount || 100, 100) : 1, // 默认100,最大100
320+
count: multiple ? Number(maxCount) : 1,
295321
type: accept,
296322
extension,
297323
success: (res) => resolve(res.tempFiles),
@@ -301,9 +327,20 @@ export function useUpload(): UseUploadReturn {
301327

302328
break
303329
default:
304-
// 默认选择图片
330+
// #ifdef MP-WEIXIN
331+
uni.chooseMedia({
332+
count: multiple ? maxCount : 1,
333+
mediaType: ['image'],
334+
sourceType,
335+
sizeType,
336+
camera,
337+
success: (res) => resolve(formatMedia(res)),
338+
fail: reject
339+
})
340+
// #endif
341+
// #ifndef MP-WEIXIN
305342
uni.chooseImage({
306-
count: multiple ? Math.min(maxCount || 9, 9) : 1, // 默认9,最大9
343+
count: multiple ? maxCount : 1,
307344
sizeType,
308345
sourceType,
309346
// #ifdef H5
@@ -312,6 +349,7 @@ export function useUpload(): UseUploadReturn {
312349
success: (res) => resolve(formatImage(res)),
313350
fail: reject
314351
})
352+
// #endif
315353
break
316354
}
317355
})

‎src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -413,7 +413,7 @@ function onChooseFile(currentIndex?: number) {
413413
multiple,
414414
sizeType,
415415
sourceType,
416-
maxCount: limit ? limit - uploadFiles.value.length : 9,
416+
maxCount: limit ? limit - uploadFiles.value.length : limit,
417417
accept,
418418
compressed,
419419
maxDuration,

0 commit comments

Comments
 (0)