feat: upload上传组件单独控制是否显示删除图标,手动上传时同步更新fileList#1447
Open
jiaruiyan wants to merge 1 commit intoMoonofweisheng:masterfrom
Open
feat: upload上传组件单独控制是否显示删除图标,手动上传时同步更新fileList#1447jiaruiyan wants to merge 1 commit intoMoonofweisheng:masterfrom
jiaruiyan wants to merge 1 commit intoMoonofweisheng:masterfrom
Conversation
|
@jiaruiyan is attempting to deploy a commit to the weisheng's projects Team on Vercel. A member of the Team first needs to authorize it. |
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
Walkthrough为 wd-upload 添加文件级属性 Changes
Sequence Diagram(s)（本次变更为轻量的 UI/类型扩展，未引入需要可视化的多方顺序流程，故不生成序列图。） Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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. 🔧 markdownlint-cli2 (0.18.1)docs/component/upload.mdmarkdownlint-cli2 v0.18.1 (markdownlint v0.38.0) 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. Comment |
![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
🤖 Fix all issues with AI agents
In `@docs/component/upload.md`:
- Around line 618-653: The docs incorrectly list hideRemoveIcon as a component
prop; remove the hideRemoveIcon row from the component props table and add it to
the "file 数据结构" table as a per-file attribute named hideRemoveIcon (type:
boolean) with a concise description like "是否隐藏删除按钮（仅在单个文件项生效）" and default
false; update its label text from "是否隐藏参数按钮" to "删除按钮" and ensure the new entry
is placed alongside other file-item keys (e.g., next to status/key fields such
as status-key or file-list entries).
In `@src/subPages/upload/Index.vue`:
- Around line 116-119: The demo for the hidden-delete-button example is missing
the upload endpoint which can cause the demo to fail; update the <demo-block>
example by adding the action prop to the wd-upload component (the instance bound
to fileList22) and set it to the same upload URL used by the other examples so
wd-upload(action="...") has a valid upload endpoint for fileList22.
In `@src/uni_modules/wot-design-uni/components/wd-upload/types.ts`:
- Around line 55-56: The comment for the hideRemoveIcon property is backwards;
update the comment on the hideRemoveIcon field in types.ts (the declaration of
hideRemoveIcon?: boolean) so it correctly states that when hideRemoveIcon is
true the remove/delete icon is hidden (and false shows it). Ensure the comment
language mirrors the property name semantics (e.g., "是否隐藏删除按钮，true 时隐藏") and
keep it adjacent to the hideRemoveIcon declaration.
Comment on lines
+618
to
+653
| | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | ||
| |------------------------------|-------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------|------------------------------------------------|----------------------------|--------| | ||
| | file-list / v-model:file-list | 上传的文件列表, 例如: [{ name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg' }] | array | - | [] | - | | ||
| | action | 必选参数，上传的地址 | string | - | - | - | | ||
| | header | 设置上传的请求头部 | object | - | - | - | | ||
| | multiple | 是否支持多选文件 | boolean | - | - | - | | ||
| | disabled | 是否禁用 | boolean | - | false | - | | ||
| | reupload | 是否开启覆盖上传，开启后会关闭图片预览 | boolean | - | false | 1.5.0 | | ||
| | limit | 最大允许上传个数 | number | - | - | - | | ||
| | show-limit-num | 限制上传个数的情况下，是否展示当前上传的个数 | boolean | - | false | - | | ||
| | max-size | 文件大小限制，单位为`byte` | number | - | - | - | | ||
| | source-type | 选择图片的来源，chooseImage 接口详细参数，查看[官方手册](https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage) | array / string | - | ['album', 'camera'] | - | | ||
| | size-type | 所选的图片的尺寸，chooseImage 接口详细参数，查看[官方手册](https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage) | array / string | - | ['original', 'compressed'] | - | | ||
| | name | 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容，uploadFile 接口详细参数，查看[官方手册](https://uniapp.dcloud.net.cn/api/request/network-file#uploadfile) | string | - | file | - | | ||
| | formData | HTTP 请求中其他额外的 form data，uploadFile 接口详细参数，查看[官方手册](https://uniapp.dcloud.net.cn/api/request/network-file#uploadfile) | object | - | - | - | | ||
| | header | HTTP 请求 Header，Header 中不能设置 Referer，uploadFile 接口详细参数，查看[官方手册](https://uniapp.dcloud.net.cn/api/request/network-file#uploadfile) | object | - | - | - | | ||
| | on-preview-fail | 预览失败执行操作 | function({ index, imgList }) | - | - | - | | ||
| | before-upload | 上传文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ files, fileList, resolve }) | - | - | - | | ||
| | before-choose | 选择图片之前的钩子，参数为文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ fileList, resolve }) | - | - | - | | ||
| | before-remove | 删除文件之前的钩子，参数为要删除的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ file, fileList, resolve }) | - | - | - | | ||
| | before-preview | 图片预览前的钩子，参数为预览的图片下标和图片列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({file, index, imgList, resolve }) | - | - | - | | ||
| | build-form-data | 构建上传`formData`的钩子，参数为上传的文件、待处理的`formData`，返回值为处理后的`formData`，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ file, formData, resolve }) | - | - | 0.1.61 | | ||
| | loading-type | [加载中图标类型](/component/loading) | string | - | circular-ring | - | | ||
| | loading-color | [加载中图标颜色](/component/loading) | string | - | #ffffff | - | | ||
| | loading-size | [加载中图标尺寸](/component/loading) | string | - | 24px | - | | ||
| | status-key | file 数据结构中，status 对应的 key | string | - | status | - | | ||
| | image-mode | 预览图片的 mode 属性 | ImageMode | - | aspectFit | - | | ||
| | accept | 接受的文件类型 | UploadFileType | **image** **video** **media** **file** **all** | **image** | 1.3.0 | | ||
| | compressed | 是否压缩视频，当 accept 为 video \| media 时生效 | boolean | - | true | 1.3.0 | | ||
| | maxDuration | 拍摄视频最长拍摄时间，当 accept 为 video \| media 时生效，单位秒 | Number | - | 60 | 1.3.0 | | ||
| | camera | 使用前置或者后置相机，当 accept 为 video \| media 时生效 | UploadCameraType | **front** | **back** | 1.3.0 | | ||
| | successStatus | 接口响应的成功状态（statusCode）值 | number | - | 200 | 1.3.4 | | ||
| | auto-upload | 是否选择文件后自动上传。为 false 时应手动调用 submit() 方法开始上传 | boolean | - | true | 1.3.8 | | ||
| | upload-method | 自定义上传方法 | UploadMethod | - | - | 1.3.8 | | ||
| | extension | 根据文件拓展名过滤(H5支持全部类型过滤,微信小程序支持all和file时过滤,其余平台不支持) | string[] | - | - | 1.9.0 | | ||
| | hideRemoveIcon | 是否隐藏参数按钮(如果组件禁用状态不生效) | boolean | - | - | $LOWEST_VERSION$ | |
There was a problem hiding this comment.
hideRemoveIcon 文档位置与描述不准确。
该字段是文件项属性而非组件 prop，且应描述为“删除按钮”。建议移到“file 数据结构”表并修正文案。
🛠️ 建议修改（移除属性表行）
-| hideRemoveIcon | 是否隐藏参数按钮(如果组件禁用状态不生效) | boolean | - | - | $LOWEST_VERSION$ |🛠️ 建议新增（在“file 数据结构”表中添加）
| response | string / object | 后端返回的内容，可能是对象，也可能是字符串 | - |
+| hideRemoveIcon | boolean | 是否隐藏删除按钮（true 隐藏） | $LOWEST_VERSION$ |🤖 Prompt for AI Agents
In `@docs/component/upload.md` around lines 618 - 653, The docs incorrectly list
hideRemoveIcon as a component prop; remove the hideRemoveIcon row from the
component props table and add it to the "file 数据结构" table as a per-file
attribute named hideRemoveIcon (type: boolean) with a concise description like
"是否隐藏删除按钮（仅在单个文件项生效）" and default false; update its label text from "是否隐藏参数按钮"
to "删除按钮" and ensure the new entry is placed alongside other file-item keys
(e.g., next to status/key fields such as status-key or file-list entries).
jiaruiyan
force-pushed
the
yjr_upload_20260118
branch
from
2ef366f to
63eb12f
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue (1)
336-360: 重传时会重置hideRemoveIcon，导致配置失效当
currentIndex存在时会替换旧项，但目前固定写死为false，会把用户在fileList中配置的隐藏状态覆盖掉。建议保留旧值（或允许从file传入）。✅ 建议修复
function initFile(file: ChooseFile, currentIndex?: number) { const { statusKey } = props + const prev = typeof currentIndex === 'number' ? uploadFiles.value[currentIndex] : undefined // 状态初始化 const initState: UploadFileItem = { uid: context.id++, // 仅h5支持 name name: file.name || '', thumb: file.thumb || '', [statusKey]: 'pending', size: file.size || 0, url: file.path, percent: 0, // 是否隐藏删除按钮 默认展示 - hideRemoveIcon: false + hideRemoveIcon: (file as UploadFileItem).hideRemoveIcon ?? prev?.hideRemoveIcon ?? false }
jiaruiyan
changed the title
jiaruiyan
force-pushed
the
yjr_upload_20260118
branch
from
63eb12f to
6635b1f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#1442
💡 需求背景和解决方案
新增字段
☑️ 请求合并前的自查清单
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.