#481 feat: upload组件增强：手动上传，双向绑定file-list，自定义上传函数 #483

samnyan · 2024-08-01T10:00:01Z

🤔 这个 PR 的性质是？(至少选择一个)

🔗 相关 Issue

#481

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

文档已补充或无须补充
代码演示已提供或无须提供
TypeScript 定义已补充或无须补充

Summary by CodeRabbit

新功能
- 引入双向数据绑定支持，简化文件列表与父组件的同步。
- 新增手动上传触发功能，用户可控制上传时机。
- 支持自定义上传方法，开发者可灵活定义上传逻辑。
文档
- 更新了文件上传组件的文档，增加了使用示例和属性说明。
功能增强
- 改进了上传状态管理，支持动态状态表示。
- 添加了更详细的事件类型定义，提高了类型安全性。

netlify · 2024-08-01T10:00:04Z

✅ Deploy Preview for wot-design-uni ready!

Name	Link
🔨 Latest commit	`abedc15`
🔍 Latest deploy log	https://app.netlify.com/sites/wot-design-uni/deploys/66ab5ca38c805e0008e27f10
😎 Deploy Preview	https://deploy-preview-483--wot-design-uni.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

vercel · 2024-08-01T10:00:09Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
wot-design-uni	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 1, 2024 10:01am

coderabbitai · 2024-08-01T10:00:11Z

Walkthrough

此次更改显著增强了文件上传组件的功能，支持双向数据绑定、手动上传和自定义上传方法。通过引入新的属性和方法，用户可以更灵活地管理上传过程，提高了组件的可扩展性和用户体验。

Changes

文件路径	更改摘要
`docs/component/upload.md`	增加双向绑定 `v-model` 支持，手动上传、上传方法自定义功能，更新文档示例和属性描述。
`src/pages/upload/Index.vue`	更新 `wd-upload` 组件，实现双向绑定，新增手动触发上传和自定义上传方法的示例。
`src/uni_modules/wot-design-uni/components/wd-upload/types.ts`	更新 `UploadFileItem` 类型，新增状态类型和事件类型，增强类型安全和可配置性。
`src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue`	改进状态管理，丰富事件发射，优化上传逻辑，增强 TypeScript 类型定义。

Possibly related issues

Moonofweisheng/wot-design-uni#481: 此功能需求与本次更改完全一致，涵盖了手动上传和双向绑定等新特性。

在草地上跳跃小兔兔，
上传新功能乐无穷。
手动上传不慌忙，
自定义方法更灵活。
兔子欢快舞蹈中，
上传世界真美好！ 🐰✨

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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 as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 197d61a and abedc15.

Files selected for processing (4)

docs/component/upload.md (5 hunks)
src/pages/upload/Index.vue (5 hunks)
src/uni_modules/wot-design-uni/components/wd-upload/types.ts (4 hunks)
src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue (10 hunks)

Additional comments not posted (20)

src/uni_modules/wot-design-uni/components/wd-upload/types.ts (6)

39-40: 更改状态类型以提高类型安全性

将 status 属性从 string 更改为 UploadStatusType 提高了类型安全性，这是一个积极的改进。

64-64: 引入新的状态类型

引入 UploadStatusType 类型，将状态选项整合到一个可重用的类型中，这是一个良好的实践。

100-100: 引入新的表单数据类型

引入 UploadFormData 类型作为 Record<string, any>，允许更灵活的表单数据处理。

104-104: 更改表单数据类型以提高一致性

将 UploadBuildFormDataOption 中的 formData 属性更新为 UploadFormData，提高了代码库的一致性。

111-111: 引入新的上传方法类型

引入 UploadMethod 类型，指定自定义上传方法的函数签名，增强了组件的可扩展性。

303-309: 增加新的属性以增强配置能力

在 uploadProps 中增加了 autoUpload 和 uploadMethod 属性，增强了上传组件的配置能力。

src/pages/upload/Index.vue (4)

80-80: 扩展导入语句以包含更多类型

导入语句已扩展以包含 UploadFileItem、UploadFormData 和 UploadMethod，表明这些类型在组件中有更广泛的使用。

214-215: 修改参数解构以提高可读性

在 handleChange 函数中修改参数解构，提高了函数的可读性。

266-280: 添加自定义上传方法

添加了 customUpload 函数，展示了如何实现带有确认对话框的自定义上传逻辑。

68-75: 添加新的演示块以增强组件功能

引入了“手动触发上传”和“自定义上传方法”的新演示块，改进了上传组件的可用性和灵活性。

src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue (3)

117-126: 增强事件处理的类型安全性

defineEmits 函数现在为每个事件指定了类型，提高了事件处理机制的类型安全性和清晰度。

128-130: 暴露提交方法以支持编程触发上传

添加了 defineExpose 函数以暴露 submit 方法，允许通过编程方式触发上传过程。

Line range hint 506-515: 改进移除文件函数的类型安全性

handleRemove 函数现在使用 UploadFileItem 作为 file 参数，提高了类型安全性和一致性。

docs/component/upload.md (7)

41-59: 文档更新：双向绑定

文档清晰地解释了如何使用 v-model 进行双向绑定，示例代码也很明确。

504-524: 文档更新：手动触发上传

文档清晰地解释了如何设置 auto-upload 为 false 并手动调用 submit() 方法进行上传，示例代码也很明确。

526-562: 文档更新：自定义上传方法

文档清晰地解释了如何使用 upload-method 属性传入自定义上传函数，示例代码也很明确。

566-597: 文档更新：新增属性

文档清晰地列出了新增的属性及其说明，确保了用户能够理解和使用这些新功能。

640-645: 文档更新：新增方法

文档清晰地列出了 submit 方法及其说明，确保了用户能够理解和使用该方法。

612-619: 文档更新：文件数据结构

文档清晰地列出了文件数据结构中的新键及其说明，确保了用户能够理解和使用这些新功能。

41-41: 文档更新：最低版本

文档清晰地列出了新功能的最低版本要求，确保了用户能够了解版本兼容性。

Also applies to: 597-597, 644-644

samnyan added 5 commits August 1, 2024 15:17

fix: 🐛 修复Upload组件没有根据 statusKey 配置项判断状态

20942cb

feat: ✨ Upload组件增加手动触发上传功能

d516412

feat: ✨ Upload组件增加双向绑定

abb6273

refactor: ♻️补充 Upload 组件事件类型

9de750c

feat: ✨Upload 组件增加自定义上传函数

abedc15

vercel bot deployed to Preview August 1, 2024 10:01 View deployment

coderabbitai bot reviewed Aug 1, 2024

View reviewed changes

Moonofweisheng approved these changes Aug 14, 2024

View reviewed changes

Moonofweisheng merged commit 3def17e into Moonofweisheng:master Aug 14, 2024
6 checks passed

This was referenced Sep 12, 2024

fix: upload组件beforePreview新增file参数, 方便用户在预览前根据文件信息判断 #598

Merged

feat: ✨ 新增Tour引导操作组件 #608

Closed

coderabbitai bot mentioned this pull request Sep 23, 2024

feat: ✨ Upload新增preview-cover插槽 #620

Merged

19 tasks

coderabbitai bot mentioned this pull request Nov 8, 2024

feat: ✨ 使用Transition重构Popup为center类型的Popup添加zoom-in动画 #699

Merged

19 tasks

coderabbitai bot mentioned this pull request Nov 22, 2024

feat: ✨ Upload 添加 use-preview 属性支持关闭文件预览点击文件替换上传(#664) #728

Open

19 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#481 feat: upload组件增强：手动上传，双向绑定file-list，自定义上传函数 #483

#481 feat: upload组件增强：手动上传，双向绑定file-list，自定义上传函数 #483

samnyan commented Aug 1, 2024 •

edited by coderabbitai bot

Loading

netlify bot commented Aug 1, 2024 •

edited

Loading

vercel bot commented Aug 1, 2024 •

edited

Loading

coderabbitai bot commented Aug 1, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

coderabbitai bot left a comment

#481 feat: upload组件增强：手动上传，双向绑定file-list，自定义上传函数 #483

#481 feat: upload组件增强：手动上传，双向绑定file-list，自定义上传函数 #483

Conversation

samnyan commented Aug 1, 2024 • edited by coderabbitai bot Loading

🤔 这个 PR 的性质是？(至少选择一个)

🔗 相关 Issue

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

Summary by CodeRabbit

netlify bot commented Aug 1, 2024 • edited Loading

✅ Deploy Preview for wot-design-uni ready!

vercel bot commented Aug 1, 2024 • edited Loading

coderabbitai bot commented Aug 1, 2024 • edited Loading

Walkthrough

Changes

Possibly related issues

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

samnyan commented Aug 1, 2024 •

edited by coderabbitai bot

Loading

netlify bot commented Aug 1, 2024 •

edited

Loading

vercel bot commented Aug 1, 2024 •

edited

Loading

coderabbitai bot commented Aug 1, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)