fix(uploader): 修复data外部修改后提交时依然是旧值问题 #3223
Conversation
Walkthrough此次更改主要集中在 Changes
Possibly related PRs
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (7)
src/packages/__VUE/uploader/type.ts (1)
14-14: 建议添加 JSDoc 注释建议为
sourceFile属性添加 JSDoc 注释，说明其用途和重要性：+ /** 原始文件对象，用于确保上传时使用最新的文件数据 */ sourceFile?: Filesrc/packages/__VUE/uploader/doc.taro.md (1)
286-286: 建议补充 sourceFile 属性的使用场景说明
sourceFile属性的添加对解决数据外部修改问题很重要。建议补充以下内容：
- 说明该属性在什么情况下会被使用
- 补充示例代码展示如何正确使用该属性
建议更新文档内容如下：
-| sourceFile | 上传所需的 file（仅WEB） | - | +| sourceFile | 上传所需的 file 对象，用于在外部修改 file 数据后重新上传（仅WEB） | - |src/packages/__VUE/uploader/doc.md (2)
371-371: 建议补充 sourceFile 属性的详细说明建议为 sourceFile 属性添加更详细的说明，包括：
- 属性的具体用途和使用场景
- 与其他属性（如 url）的关系
- 在外部修改时的注意事项
这将帮助开发者更好地理解和使用这个新属性。
Line range hint
1-400: 建议完善示例代码的错误处理文档中的示例代码质量很好，但建议在以下方面进行补充：
- 在图片压缩示例中添加更多注释，解释关键步骤
- 添加网络错误、超时等异常情况的处理示例
- 为
before-xhr-upload示例添加更多常见使用场景这些补充将帮助开发者更好地处理各种边界情况。
src/packages/__VUE/uploader/index.vue (1)
196-196: 建议优化 uploadOption 的配置方式当前的配置方式存在一些重复赋值的情况，建议将相关配置进行整合。
建议如下重构：
- uploadOption.formData = formData - uploadOption.sourceFile = fileItem.sourceFile + Object.assign(uploadOption, { + formData, + sourceFile: fileItem.sourceFile + })Also applies to: 203-203
src/packages/__VUE/uploader/doc.en-US.md (2)
Line range hint
312-332: 优化自定义 XHR 上传示例示例中展示了如何使用
before-xhr-upload钩子来处理文件上传，特别是在使用 PUT 方法时直接上传源文件流的情况。这个示例对于理解sourceFile的使用非常有帮助。建议在示例中添加更多注释来说明这种实现方式的优势和适用场景。
建议添加如下注释：
<!-- When the upload method is put, upload the source file stream directly --> <template> <nut-uploader url="https://xxxx" method="put" :before-xhr-upload="beforeXhrUpload"></nut-uploader> </template> <script setup> import { ref } from 'vue' +// 使用 sourceFile 可以确保获取到最新的文件数据 +// 特别适用于需要直接上传文件流的场景 const beforeXhrUpload = (xhr, options) => { if (options.method.toLowerCase() == 'put') { xhr.send(options.sourceFile) } else { xhr.send(options.formData) } } </script>🧰 Tools
🪛 Markdownlint
368-368: null
Spaces inside code span elements(MD038, no-space-in-code)
Line range hint
1-24: 建议完善文档结构文档整体结构清晰，但建议在介绍部分添加以下内容：
- 补充组件的主要功能特性列表
- 添加常见问题（FAQ）部分
- 增加与其他相关组件的对比说明
这些补充内容将帮助开发者更好地理解和使用组件。
🧰 Tools
🪛 Markdownlint
368-368: null
Spaces inside code span elements(MD038, no-space-in-code)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
src/packages/__VUE/uploader/doc.en-US.md(1 hunks)src/packages/__VUE/uploader/doc.md(1 hunks)src/packages/__VUE/uploader/doc.taro.md(1 hunks)src/packages/__VUE/uploader/index.taro.vue(2 hunks)src/packages/__VUE/uploader/index.vue(2 hunks)src/packages/__VUE/uploader/type.ts(1 hunks)
🔇 Additional comments (6)
src/packages/__VUE/uploader/type.ts (1)
14-14: 类型改进：从 formData: any 到 sourceFile?: File
这个改动很好：
- 通过保持对源文件的引用，解决了外部修改后提交时的旧值问题
- 从松散的
any类型转向更严格的File类型，提高了类型安全性 - 使用可选属性符合实际使用场景
src/packages/__VUE/uploader/index.vue (2)
269-270: 文件处理逻辑优化
直接将文件对象赋值给 sourceFile，移除了之前的 formData 创建过程，使代码更加清晰。
不过建议添加类型断言以增强类型安全性：
- fileItem.sourceFile = file
+ fileItem.sourceFile = file as File188-193: 优化了外部数据的处理方式
通过在上传时重新创建 FormData 并遍历 props.data，解决了外部数据修改后提交时依然使用旧值的问题。这种实现方式确保了每次上传都使用最新的数据。
让我们验证一下这个修复是否完全解决了问题：
src/packages/__VUE/uploader/doc.en-US.md (1)
370-370: 新增 sourceFile 属性文档说明
文档中新增了 sourceFile 属性的说明，这与 PR #3064 中修复外部修改 data 后提交时依然是旧值的问题相关。这个属性的添加对于解决问题至关重要。
让我们验证一下这个属性的使用情况：
✅ Verification successful
sourceFile 属性的文档添加是正确且必要的
从代码实现来看，sourceFile 属性在上传组件中扮演着重要角色：
- 在
FileItem类中作为可选属性存储原始文件对象 - 在
UploadOptions类中用于传递上传配置 - 在上传过程中用于构建
FormData并执行文件上传
这个属性的文档添加确实对应了 PR #3064 中修复外部修改 data 后提交时依然是旧值的问题，因为它确保了组件能够正确追踪和使用最新的文件数据。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 sourceFile 属性在代码库中的使用情况
# 预期：在组件代码和测试中都应该有对 sourceFile 的引用
# 测试：搜索 sourceFile 的使用
rg "sourceFile" --type ts --type vue
Length of output: 64
Script:
#!/bin/bash
# Search for sourceFile usage in all files
rg "sourceFile" -t js -t ts -t jsx -t tsx
# Also search in .vue files specifically (using plain text search)
find . -name "*.vue" -type f -exec grep -l "sourceFile" {} \;
# Check the implementation in the uploader component
find . -type f -path "*/__VUE/uploader/*" -exec grep -l "sourceFile" {} \;
Length of output: 662
Script:
#!/bin/bash
# Check the implementation details of sourceFile in the component files
echo "=== uploader.ts content ==="
cat ./src/packages/__VUE/uploader/uploader.ts
echo -e "\n=== type.ts content ==="
cat ./src/packages/__VUE/uploader/type.ts
echo -e "\n=== index.vue content ==="
cat ./src/packages/__VUE/uploader/index.vue
Length of output: 15018
src/packages/__VUE/uploader/index.taro.vue (2)
395-401: 良好的处理 WEB 环境下的文件属性
在 WEB 环境下正确设置了 fileItem 的 sourceFile、name 和 type 属性，有助于文件上传过程的顺利进行。
284-295: 确认是否还有对 fileItem.formData 的引用
由于在代码中移除了 fileItem.formData，请确认在整个代码库中是否仍存在对其的引用，避免潜在的错误。
运行以下脚本以验证是否存在遗留的引用：
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (6)
src/packages/__VUE/uploader/doc.taro.md (2)
286-286: 建议完善 sourceFile 属性的文档说明当前文档对
sourceFile属性的说明较为简单。建议：
- 补充该属性的具体用途和使用场景
- 添加示例代码展示如何正确使用该属性
- 说明该属性在数据修改场景下的作用
建议按以下格式补充文档：
-| sourceFile | 上传所需的 file（仅WEB） | - | +| sourceFile | 上传所需的原始文件对象，用于跟踪文件状态变化和确保数据同步。在外部修改上传数据时尤其重要（仅WEB） | - |
Line range hint
1-400: 建议补充外部数据修改的使用示例为了更好地解决 issue #3064 中提到的外部数据修改问题，建议：
- 添加一个专门的示例，展示如何处理外部数据修改的场景
- 在事件文档中补充说明各个事件与
sourceFile的关联- 完善 API 文档中关于数据同步的说明
建议在"基础用法"部分后添加如下示例：
<template> <!-- 外部数据修改示例 --> <nut-uploader :url="uploadUrl" v-model:file-list="fileList" @change="onChange" ></nut-uploader> </template> <script setup> const fileList = ref([]) const onChange = ({ fileList, event }) => { // 在这里可以安全地修改上传数据 console.log('文件原始数据：', fileList[0].sourceFile) } </script>src/packages/__VUE/uploader/doc.md (1)
371-371: 建议完善 sourceFile 属性的文档说明当前文档对
sourceFile属性的描述过于简单。建议：
- 补充更详细的说明，包括该属性的用途和重要性
- 说明该属性替代了原有的
formData属性- 添加示例代码，展示如何正确使用该属性
建议修改为：
-| sourceFile | 上传所需的 file | - | +| sourceFile | 上传所需的原始文件对象。该属性替代了原有的 formData 属性，用于确保外部修改后的文件数据能够正确提交。详见"自定义上传方式"示例 | - |src/packages/__VUE/uploader/index.vue (1)
196-196: 建议增强类型安全性当前实现在功能上是正确的，但建议添加类型检查以增强代码的健壮性。
建议添加以下类型检查：
- uploadOption.formData = formData + uploadOption.formData = formData as FormData - uploadOption.sourceFile = fileItem.sourceFile + uploadOption.sourceFile = fileItem.sourceFile as FileAlso applies to: 203-203
src/packages/__VUE/uploader/doc.en-US.md (1)
370-370: 新增 sourceFile 属性文档说明新增的
sourceFile属性文档完善了上传文件时的数据追踪能力，这对解决外部修改后提交时的旧值问题至关重要。建议补充一些使用示例，以帮助开发者更好地理解这个新属性的应用场景。建议在文档中添加以下示例代码：
<template> <nut-uploader :url="uploadUrl" @change="onChange" /> </template> <script setup> const onChange = ({ fileList }) => { // 通过 sourceFile 属性访问原始文件对象 console.log(fileList[0].sourceFile) } </script>src/packages/__VUE/uploader/index.taro.vue (1)
395-401: 建议增加文件对象的错误处理当前实现正确保存了原始文件对象，但建议添加对
file.originalFileObj的空值检查，以提高代码的健壮性。建议修改如下：
if (Taro.getEnv() == 'WEB') { - fileItem.sourceFile = file.originalFileObj - fileItem.name = file.originalFileObj?.name - fileItem.type = file.originalFileObj?.type + if (file.originalFileObj) { + fileItem.sourceFile = file.originalFileObj + fileItem.name = file.originalFileObj.name + fileItem.type = file.originalFileObj.type + } else { + console.warn('原始文件对象不存在') + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
src/packages/__VUE/uploader/doc.en-US.md(1 hunks)src/packages/__VUE/uploader/doc.md(1 hunks)src/packages/__VUE/uploader/doc.taro.md(1 hunks)src/packages/__VUE/uploader/index.taro.vue(2 hunks)src/packages/__VUE/uploader/index.vue(2 hunks)src/packages/__VUE/uploader/type.ts(1 hunks)
🔇 Additional comments (4)
src/packages/__VUE/uploader/type.ts (1)
14-14: 类型改进：使用 File 类型替代 formData
将 formData: any 替换为 sourceFile?: File 是一个很好的改进：
- 提供了更好的类型安全性
- 直接引用原始文件对象，避免了数据不同步的问题
- 使代码更加清晰和可维护
让我们验证这个改动在上传功能中的影响：
✅ Verification successful
类型改进验证：sourceFile 的使用符合预期
基于代码分析，sourceFile 的改动是安全且合理的：
- 在
index.vue和index.taro.vue中正确使用 sourceFile 进行文件上传 - 上传选项
UploadOptions中已包含 sourceFile 字段 - 文档中已更新相关 API 说明
- 实现中保持了对 formData 的兼容支持
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 sourceFile 在上传相关代码中的使用情况
# 测试：查找与文件上传相关的代码
rg -A 5 "sourceFile" --type vue
Length of output: 59
Script:
#!/bin/bash
# 搜索所有文件中的 sourceFile 使用情况
rg -A 5 "sourceFile"
# 查找上传相关的文件
fd "upload|uploader" --type f
# 检查 uploader 目录下的所有文件
fd . "uploader" --type f --exec cat {}
Length of output: 4983
src/packages/__VUE/uploader/index.vue (2)
188-193: 修复了外部数据更新不生效的问题
通过每次创建新的 FormData 实例并从 props.data 中获取最新值的方式，解决了数据更新不生效的问题。这种实现方式确保了在提交时使用的始终是最新的外部数据。
269-269: 优化了文件处理逻辑
直接将文件对象赋值给 sourceFile 简化了代码逻辑，避免了不必要的 FormData 创建，使代码更加清晰。
src/packages/__VUE/uploader/index.taro.vue (1)
284-294: 修复了外部数据更新不生效的问题
通过为WEB环境创建新的FormData实例，并正确追加最新的props.data数据，解决了数据外部修改后提交时依然使用旧值的问题。代码实现合理且有效。
这个 PR 做了什么? (简要描述所做更改)
修复uploader的
data参数外部修改后提交时仍然是选择文件时的旧值问题 #3064这个 PR 是什么类型? (至少选择一个)
这个 PR 涉及以下平台:
这个 PR 是否已自测:
Summary by CodeRabbit
Uploader组件的文档，增加了新属性、事件和方法。maximize、before-upload和before-xhr-upload属性。oversize事件，用于处理超出文件大小限制的情况。FileItem接口中新增sourceFile属性，替代了formData属性。