feat: ✨ Upload 添加 use-preview 属性支持关闭文件预览点击文件替换上传(#664) #728
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此拉取请求对上传组件的文档和实现进行了更新，增加了新的功能和说明。文档中新增了“关闭预览点击文件替换”部分，介绍了如何通过设置 Changes
Possibly related PRs
Suggested reviewers
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? 🪧 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!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (4)
src/uni_modules/wot-design-uni/components/wd-upload/types.ts (1)
319-323: 属性定义和文档说明完善属性定义清晰，类型安全性好，文档注释完整。建议补充默认值说明，以保持与其他属性文档风格一致。
建议更新注释，添加默认值说明：
/** * 是否点击已上传的图片或视频可预览，值为false的情况下再次弹出上传 * 类型：boolean + * 默认值：true */ usePreview: makeBooleanProp(true),src/pages/upload/Index.vue (1)
127-131: 建议添加文件名称以提高示例的完整性为了使示例更加完整，建议为文件对象添加
name属性，这样可以更好地展示实际使用场景。const fileList17 = ref<UploadFile[]>([ { - url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg' + url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg', + name: 'panda' } ])docs/component/upload.md (1)
617-617: 建议优化属性描述的表达方式当前描述：
| use-preview | 是否点击已上传的图片或视频可预览，值为false的情况下再次弹出上传 | boolean | - | true | 1.3.15 |建议修改为更简洁的表达：
| use-preview | 是否启用预览模式，false 时点击已上传文件将触发重新上传 | boolean | - | true | 1.3.15 |src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue (1)
623-693: 建议优化代码以减少重复
onPreviewImage、onPreviewVideo和onPreviewFile函数中存在大量相似的逻辑，可以考虑将这些函数合并或提取公共部分，提升代码的可维护性和可读性。示例：
function onPreviewMedia(file: UploadFileItem, isMediaType: (file: UploadFileItem) => boolean) { const { beforePreview, usePreview } = props const index: number = uploadFiles.value.findIndex((item) => item.url === file.url) if (usePreview) { if (beforePreview) { beforePreview({ file, index, imgList: [], resolve: (isPass: boolean) => { isPass && handlePreviewMedia(file, isMediaType) } }) } else { handlePreviewMedia(file, isMediaType) } } else { handleChoose(index) } }然后针对不同类型调用：
function onPreviewImage(file: UploadFileItem) { onPreviewMedia(file, isImage) } function onPreviewVideo(file: UploadFileItem) { onPreviewMedia(file, isVideo) } function onPreviewFile(file: UploadFileItem) { onPreviewMedia(file, (file) => !isImage(file) && !isVideo(file)) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
docs/component/upload.md(2 hunks)src/pages/upload/Index.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-upload/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue(7 hunks)
🔇 Additional comments (3)
src/uni_modules/wot-design-uni/components/wd-upload/types.ts (1)
319-323: 验证预览相关功能的完整性
新增的 usePreview 属性与现有的预览相关功能（如 beforePreview 钩子和 onPreviewFail 事件）存在关联，需要确保功能协调。
✅ Verification successful
Let me gather more context about the preview functionality implementation.
usePreview 属性集成验证完成
usePreview 属性已正确集成到预览功能中：
- 在图片、视频和文件预览的处理函数中都有正确的条件判断
- 与
beforePreview钩子和onPreviewFail事件配合良好 - 提供了完整的预览控制流程：预览判断 -> 前置钩子 -> 预览执行 -> 失败处理
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查预览相关的功能实现
# 搜索预览相关的方法实现
echo "检查预览相关方法："
ast-grep --pattern 'onPreview$_($_) {
$$$
}'
# 搜索使用 usePreview 属性的地方
echo "检查 usePreview 使用："
rg "usePreview|use-preview"
Length of output: 1594
Script:
#!/bin/bash
# 检查 wd-upload 组件中预览相关的具体实现
echo "检查预览相关的具体实现："
rg -A 10 "const.*beforePreview.*usePreview" src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue
# 检查组件中的预览事件处理
echo "检查预览事件处理："
rg -A 5 "onPreview" src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue
# 检查组件中的预览失败处理
echo "检查预览失败处理："
rg "onPreviewFail|preview-fail" src/uni_modules/wot-design-uni/components/wd-upload/
Length of output: 5480
src/pages/upload/Index.vue (1)
14-16: 示例代码实现正确且清晰！
新增的演示模块结构合理，清晰地展示了 use-preview 属性的使用方法。
docs/component/upload.md (1)
100-112: 文档结构和示例代码符合规范
新增的"关闭预览点击文件替换"章节清晰地说明了功能用途，并提供了完整的示例代码。
| if (usePreview) { | ||
| if (beforePreview) { | ||
| beforePreview({ | ||
| file, | ||
| index, | ||
| imgList: [], | ||
| resolve: (isPass: boolean) => { | ||
| isPass && handlePreviewFile(file) | ||
| } | ||
| }) | ||
| } else { | ||
| handlePreviewFile(file) | ||
| } |
There was a problem hiding this comment.
修复替换文件时的索引匹配错误
在函数onPreviewFile中，同样需要确保index在uploadFiles.value中获取，以避免索引不匹配导致的文件替换错误。
建议修改如下：
function onPreviewFile(file: UploadFileItem) {
const { beforePreview, usePreview } = props
- const lists = uploadFiles.value.filter((file) => {
- return !isVideo(file) && !isImage(file)
- })
- const index: number = lists.findIndex((item) => item.url === file.url)
+ const index: number = uploadFiles.value.findIndex((item) => item.url === file.url)
if (usePreview) {
// 原有逻辑
} else {
handleChoose(index)
}
}Committable suggestion skipped: line range outside the PR's diff.
| if (usePreview) { | ||
| if (beforePreview) { | ||
| beforePreview({ | ||
| file, | ||
| index, | ||
| imgList: lists.map((file) => file.url), | ||
| resolve: (isPass: boolean) => { | ||
| isPass && | ||
| handlePreviewImage( | ||
| index, | ||
| lists.map((file) => file.url) | ||
| ) | ||
| } | ||
| }) | ||
| } else { | ||
| handlePreviewImage( | ||
| index, | ||
| lists.map((file) => file.url) | ||
| ) | ||
| } |
There was a problem hiding this comment.
修复替换文件时的索引匹配错误
在函数onPreviewImage中，您使用了过滤后的lists数组来获取index，但在调用handleChoose(index)时，index应该对应于uploadFiles.value中的索引。由于lists是uploadFiles.value的子集，这可能导致索引不匹配，进而替换错误的文件。
建议修改如下：
function onPreviewImage(file: UploadFileItem) {
const { beforePreview, usePreview } = props
- const lists = uploadFiles.value.filter((file) => isImage(file))
- const index: number = lists.findIndex((item) => item.url === file.url)
+ const index: number = uploadFiles.value.findIndex((item) => item.url === file.url)
if (usePreview) {
// 原有逻辑
} else {
handleChoose(index)
}
}Committable suggestion skipped: line range outside the PR's diff.
| if (usePreview) { | ||
| if (beforePreview) { | ||
| beforePreview({ | ||
| file, | ||
| index, | ||
| imgList: [], | ||
| resolve: (isPass: boolean) => { | ||
| isPass && handlePreviewVieo(index, lists) | ||
| } | ||
| }) | ||
| } else { | ||
| handlePreviewVieo(index, lists) | ||
| } |
There was a problem hiding this comment.
修复替换文件时的索引匹配错误
在函数onPreviewVideo中，与onPreviewImage类似，您使用了过滤后的lists数组来获取index，但在调用handleChoose(index)时，index应对应于uploadFiles.value中的索引。这可能导致索引不匹配的问题。
建议修改如下：
function onPreviewVideo(file: UploadFileItem) {
const { beforePreview, usePreview } = props
- const lists = uploadFiles.value.filter((file) => isVideo(file))
- const index: number = lists.findIndex((item) => item.url === file.url)
+ const index: number = uploadFiles.value.findIndex((item) => item.url === file.url)
if (usePreview) {
// 原有逻辑
} else {
handleChoose(index)
}
}Committable suggestion skipped: line range outside the PR's diff.
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
[<!--
-->]([新功能需求] upload组件增加参数让已上传成功的图片点击后不弹出预览而是调起选择文件 #664)
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
use-preview属性为false来点击已上传文件进行替换。文档
use-preview的说明，并更新了属性表以反映其类型和默认值。