feat: ✨ Upload 上传组件支持根据扩展名过滤文件 - #980
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次变更为文件上传组件新增了基于文件扩展名的过滤功能。文档中增加了相关说明和示例，并在上传组件与相关类型声明中新增了 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant C as wd-upload 组件
participant UO as useUpload 模块
participant API as 文件选择 API
U->>C: 触发文件选择
C->>UO: 调用 onChooseFile(extension, …)
UO->>API: 传递 extension 过滤参数调用 uni.chooseFile/uni.chooseImage 等
API-->>UO: 返回选择的文件
UO-->>C: 更新文件列表
C-->>U: 展示上传结果
Assessment against linked issues
Possibly related PRs
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it’s a critical failure. 🔧 ESLint
WARN GET http://10.0.0.28:4873/jest/-/jest-27.0.4.tgz error (ERR_PNPM_FETCH_500). Will retry in 10 seconds. 2 retries left. This error happened while installing a direct dependency of /tmp/eslint No authorization header was set for the request. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
🚧 Files skipped from review as they are similar to previous changes (4)
🧰 Additional context used🪛 markdownlint-cli2 (0.17.2)docs/component/use-upload.md80-80: Table column count (MD056, table-column-count) ⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (2)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Walkthrough此PR为Upload上传组件新增了根据文件扩展名过滤文件的功能。通过在支持的平台上提供 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| extension | ||
| }: ChooseFileOption): Promise<ChooseFile[]> { | ||
| return new Promise((resolve, reject) => { | ||
| const max = isDef(maxCount) ? maxCount : 1 |
There was a problem hiding this comment.
Ensure that maxCount is defined before using it in Math.min(maxCount, 9). Consider providing a default value or handling undefined cases to prevent potential runtime errors.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/component/upload.md(3 hunks)docs/component/use-upload.md(1 hunks)src/pages/upload/Index.vue(2 hunks)src/uni_modules/wot-design-uni/components/composables/useUpload.ts(6 hunks)src/uni_modules/wot-design-uni/components/wd-upload/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue(2 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
src/uni_modules/wot-design-uni/components/composables/useUpload.ts (1)
src/uni_modules/wot-design-uni/components/wd-upload/types.ts (2)
ChooseFileOption(6-35)ChooseFile(57-64)
🪛 markdownlint-cli2 (0.17.2)
docs/component/use-upload.md
80-80: Table column count
Expected: 5; Actual: 4; Too few cells, row will be missing data
(MD056, table-column-count)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (19)
src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue (2)
412-413: 添加扩展名过滤支持
extension参数已正确添加到props解构中，用于传递到chooseFile函数，实现按文件扩展名过滤的功能。实现简洁明了。
422-424: 正确传递扩展名参数
extension参数已正确传递给chooseFile函数，确保文件选择时能应用扩展名过滤规则。docs/component/upload.md (2)
604-614: 文档添加了扩展名过滤的使用说明新增的文档部分清晰地解释了如何使用
extension属性来限制文件选择，示例代码也很直观易懂。
652-652: 表格中添加了新属性的说明
extension属性已添加到 Attributes 表格中，描述了其用途、类型和平台支持情况。不过，注意到占位符
$LOWEST_VERSION$需要替换为实际的最低支持版本号。请确认此功能的最低支持版本号，并替换占位符
$LOWEST_VERSION$。src/uni_modules/wot-design-uni/components/composables/useUpload.ts (10)
47-48: 接口中添加扩展名过滤属性
UseUploadOptions接口中增加了extension属性，注释清晰地说明了其用途和平台支持情况。
230-232: 函数参数列表更新在
chooseFile函数参数中添加了extension参数，保持与接口定义一致。
234-234: 优化文件数量限制逻辑使用局部变量
max存储maxCount或默认值 1，提高了代码的可读性和可维护性。
238-243: 为 H5 平台添加扩展名过滤支持在调用
uni.chooseImage时，通过条件编译为 H5 平台添加了extension参数，同时优化了count计算逻辑。
254-256: 为 H5 平台的视频选择添加扩展名过滤通过条件编译块，仅在 H5 平台传递
extension参数给chooseVideo方法。
264-265: 优化媒体选择的数量限制逻辑使用与其他选择函数一致的
max变量计算count参数值，保持代码一致性。
275-277: 为微信小程序的文件选择添加扩展名过滤在调用
uni.chooseMessageFile时添加了extension参数，并优化了count的计算逻辑。
286-288: 为 H5 平台的所有文件类型选择添加扩展名过滤在 H5 平台的
chooseFile函数中添加了extension参数，并优化了count参数的计算。
295-297: 为微信小程序的所有文件类型选择添加扩展名过滤在微信小程序平台的
chooseMessageFile函数中添加了extension参数，同时优化了count参数的计算。
307-312: 为默认图片选择添加扩展名过滤在默认选择图片的逻辑中，通过条件编译为 H5 平台添加了
extension参数，同时优化了count参数的计算。src/pages/upload/Index.vue (2)
95-111: 👍 新增了根据扩展名过滤的示例演示这个新增的演示区块很好地展示了根据扩展名过滤文件的功能，并且针对不同平台（H5和微信小程序）提供了合适的示例。示例清晰展示了各种使用场景，包括图片、视频和文档类型的过滤。
156-159: 添加了与新示例对应的状态变量适当地为新增的上传组件定义了对应的文件列表状态变量，保持了代码组织的一致性。
src/uni_modules/wot-design-uni/components/wd-upload/types.ts (3)
8-28: 👍 优化了接口定义，使多个属性变为可选将
multiple、sourceType、maxCount、accept、compressed、maxDuration和camera等属性修改为可选属性，提高了接口的灵活性，减少了使用时的必填属性负担。
29-34: 很好地实现了文件扩展名过滤功能新增的
extension属性及其注释清晰地描述了功能的用途和使用方法。注释中明确指出了支持的平台（H5和微信小程序）以及使用示例，这对开发者非常友好。
340-345: 添加了组件属性定义，保持类型一致性在
uploadProps对象中添加extension属性定义，确保了组件属性与接口定义的一致性。注释中明确说明了各平台的支持情况，帮助开发者理解功能限制。
1e51c73 to
497523b
Compare
Deploying wot-design-uni with
|
| Latest commit: |
497523b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://054b428d.wot-design-uni.pages.dev |
| Branch Preview URL: | https://feature-upload-extension.wot-design-uni.pages.dev |
1 participant
✅ Closes: #796,#581
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#796,#581
💡 需求背景和解决方案
Upload 上传组件支持根据扩展名过滤文件，根据uni-app相关选择图片、视频和文件的API，H5支持全部类型过滤,微信小程序支持all和file时过滤,其余平台不支持。所以我们在支持的平台提供extension属性用于支持根据扩展名过滤文件
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档