Skip to content

feat: ✨ 提供 useUpload 用于便捷上传 - #969

Merged
Moonofweisheng merged 1 commit into
masterfrom
feature/hooks/useUpload
Mar 24, 2025
Merged

feat: ✨ 提供 useUpload 用于便捷上传#969
Moonofweisheng merged 1 commit into
masterfrom
feature/hooks/useUpload

Conversation

@Moonofweisheng

@Moonofweisheng Moonofweisheng commented Mar 24, 2025

Copy link
Copy Markdown
Owner

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

  • 日常 bug 修复
  • 新特性提交
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • CI/CD 改进
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 代码重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

💡 需求背景和解决方案

upload中抽离出useUpload 用于便捷上传

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

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

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

Summary by CodeRabbit

  • 新功能
    • 增强了文件上传体验,提供更直观的上传进度与状态(待处理、上传中、成功、失败)的反馈。
    • 允许用户在上传过程中手动取消操作,同时自动管理多个上传任务,确保上传过程的稳定性与灵活性。

@vercel

vercel Bot commented Mar 24, 2025

Copy link
Copy Markdown

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 Mar 24, 2025 1:11pm

@coderabbitai

coderabbitai Bot commented Mar 24, 2025

Copy link
Copy Markdown

Walkthrough

本次修改新增了一个用于处理文件上传的 composable 函数 useUpload,并对相关类型进行了增强,同时更新了上传组件的逻辑。新增的功能包括统一的上传状态管理、进度与错误回调以及支持取消上传任务。各模块分别在上传流程的初始化、任务管理和视图层整合了相应的改动。

Changes

文件路径 更改摘要
src/uni_modules/wot-design-uni/components/composables/useUpload.ts 新增 useUpload 函数,导出 UPLOAD_STATUS 常量和接口 UseUploadReturnUseUploadOptions,用于集中管理上传逻辑(启动、取消、状态更新和错误处理)。
src/uni_modules/wot-design-uni/components/wd-upload/types.ts 修改 UploadMethod 类型:新增可选参数 abortPrevious,更新返回类型支持 UniApp.UploadTask;扩展 UploadExpose 类型,新增 abort 方法以支持取消上传任务。
src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue 移除无用的 getType 导入,新增 useUpload 依赖,将上传逻辑重构至 useUpload 中;在 defineExpose 中新增 abort 方法,实现对上传流程的取消操作。

Sequence Diagram(s)

sequenceDiagram
    participant U as 用户
    participant C as 上传组件
    participant ULU as useUpload Composable
    participant API as uni.uploadFile

    U ->> C: 触发文件上传
    C ->> ULU: 调用 startUpload(file, options)
    ULU ->> API: 调用上传 API
    API -->> ULU: 返回任务实例与上传状态
    ULU -->> C: 更新状态、进度与回调
    U ->> C: 触发取消上传
    C ->> ULU: 调用 abort()
    ULU ->> API: 取消正在进行的上传任务
Loading

Possibly related PRs

Poem

我是一只快乐的小兔,
在代码林中欢跳不停,
文件上传有条不紊,
取消任务也能轻松应对,
快乐编程,奇迹在每一行。
🐇✨


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 460a838 and 69f3adb.

📒 Files selected for processing (3)
  • src/uni_modules/wot-design-uni/components/composables/useUpload.ts (1 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 (4 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 (3)
  • UploadStatusType (64-64)
  • UploadFileItem (31-49)
  • UploadMethod (113-129)
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: Cloudflare Pages
🔇 Additional comments (14)
src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue (4)

104-107: 导入语句更新优化了代码组织结构

移除了未使用的导入并添加了新的 useUpload 组合式函数导入,使代码更加简洁。


136-139: 增强了组件暴露的功能接口

增加了abort方法的暴露,使组件支持取消上传的功能,提高了用户对上传过程的控制能力。


149-149: 良好地解构了useUpload的返回值

从useUpload组合式函数中解构出所需的方法和常量,符合Vue组合式API的使用最佳实践。


267-315: 优化了文件上传逻辑

重新实现了startUploadFiles函数,使用了新的useUpload组合式函数处理上传逻辑。代码结构更清晰,通过设置abortPrevious为true自动中断之前的上传任务,提升了用户体验。

特别注意的亮点:

  1. 只对状态为pending的文件进行上传,避免重复上传
  2. 灵活处理了buildFormData的情况
  3. 统一了成功、失败和进度的回调处理
src/uni_modules/wot-design-uni/components/composables/useUpload.ts (7)

4-9: 良好地定义了上传状态常量

将上传状态定义为常量对象,提高了代码的可维护性和可读性,避免了字符串字面量的直接使用。


11-18: 接口定义清晰明了

UseUploadReturn接口定义了组合式函数的返回值类型,包含了必要的方法和常量,并提供了详细的JSDoc注释,提高了API的可用性。


20-45: 上传选项接口设计全面

UseUploadOptions接口定义了上传所需的所有选项,包括基本配置、回调函数和控制选项。每个选项都有详细的注释说明其用途,便于开发者理解和使用。


47-58: 实现了上传任务管理功能

useUpload函数维护了当前上传任务的引用,并提供了abort方法来中断上传,增强了对上传过程的控制能力。


63-101: 默认上传方法实现完善

defaultUpload方法使用uni.uploadFile实现了文件上传,包含了成功/失败处理、进度跟踪,并支持中断之前的上传任务。返回上传任务实例使外部可以控制上传过程。


106-156: startUpload方法设计周到

startUpload方法负责处理文件上传流程:

  1. 解构并设置默认值,增强了函数的健壮性
  2. 更新文件状态为loading
  3. 配置上传选项,包括回调函数处理
  4. 支持自定义上传方法和默认方法

代码逻辑清晰,错误处理完善,提高了上传功能的可靠性。


158-163: 返回值结构清晰

返回包含了startUpload、abort方法和UPLOAD_STATUS常量,API设计简洁明了,易于使用。

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

123-124: 增加了中断上传的选项

在UploadMethod类型中添加了abortPrevious选项,并提供了注释说明其用途,使上传方法可以自动中断之前的上传任务。


129-129: 增强了上传方法的返回类型

修改UploadMethod的返回类型为UniApp.UploadTask | void | Promise<void>,支持返回上传任务实例,增强了对上传过程的控制能力。


343-347: 添加了取消上传的接口

在UploadExpose类型中增加了abort方法,使组件可以暴露取消上传的功能,提高了API的完整性和用户体验。

✨ Finishing Touches
  • 📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ 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>, please review it.
    • 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @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 using 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 generate docstrings to generate docstrings for this 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.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

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.

@petercat-assistant

Copy link
Copy Markdown

Walkthrough

此PR引入了一个新的useUpload功能模块,从现有的upload功能中抽离出来,以便于更便捷地进行文件上传操作。此更改包括上传状态管理、上传任务的启动和中断功能。

Changes

文件 概要
src/uni_modules/wot-design-uni/components/composables/useUpload.ts 新增useUpload模块,提供文件上传功能,包括上传状态管理、启动和中断上传任务。
src/uni_modules/wot-design-uni/components/wd-upload/types.ts 更新上传类型定义,支持返回UploadTask类型并添加自动中断选项。
src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue 集成useUpload模块,替换原有上传逻辑,支持文件上传的启动和中断。

@netlify

netlify Bot commented Mar 24, 2025

Copy link
Copy Markdown

Deploy Preview for wot-design-uni ready!

Name Link
🔨 Latest commit 69f3adb
🔍 Latest deploy log https://app.netlify.com/sites/wot-design-uni/deploys/67e15a1708953b0008e9a0f2
😎 Deploy Preview https://deploy-preview-969--wot-design-uni.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

options.onSuccess(res, file, formData)
} else {
// 上传失败
options.onError({ ...res, errMsg: res.errMsg || '' }, file, formData)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在处理上传失败时,确保errMsg属性存在,否则可能会导致未定义错误信息的情况。建议在onError回调中处理errMsg的默认值。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant