Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: FUpload组件 fileList 支持 v-model 双向绑定 #336

Merged
merged 3 commits into from
Jun 26, 2023

Conversation

ocean-gao
Copy link
Collaborator

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Code style update
  • Refactor
  • Docs
  • Build-related changes
  • Other, please describe:

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

If yes, please describe the impact and migration path for existing applications:

Related issue (if exists):

Other information:

if (!status) {
file.status = 'success';
}
});
},
{
immediate: true,

Choose a reason for hiding this comment

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

此代码是一个上传组件的 Vue 单文件组件,主要实现了文件的上传和删除功能。这里有几点需要注意:

  1. 在引入 lodash 库时,将 isEqualcloneDeep 方法注释掉了,建议检查是否影响了业务逻辑。

  2. 导入了 useNormalModel,应该是自定义 hook 函数,但是并未给出具体实现,需要检查该 hook 是否可用。

  3. 在使用 watch 监听 props 的 fileList 属性时,直接修改原来的 fileList 数组的属性,并没有通过 uploadFiles ref 来修改文件列表,可能会导致数据更新不及时,因此可以将其改为:先对每个 file 对象变更 uid 和 status 属性,再赋值给 uploadFiles.value

  4. 代码中断言 emit 的类型为 any,建议也声明明确一些,比如: emit: (event: string, ...args: Array<any>) => void

fileList.value = fileList.value.filter(
(file) => file.status !== 'error',
);
console.log('error:', param, fileList.value);
};
const exceed = (param) => {
console.log('exceed:', param);

Choose a reason for hiding this comment

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

这段代码主要是一个 Vue 组件的上传部分,下文简单介绍一下需要改进的地方和可能存在的问题。

1.需要改进的地方:

  • v-model:fileList 应该在模板中定义,而不是在标签属性里。
  • beforeUpload 是未定义的变量,需要检查。
  • console.log() 输出的信息过多,可能需要优化或删除。

2.可能存在的问题:

  • multipleLimit 设置为4,但是没有限制文件总数会造成服务器性能问题。
  • HTTP 功能因错误或其他原因否则为空的响应并不好,需要反馈给用户进行处理。

注:因为语言表述限制,请您自己翻译成对应的编程语言。

@@ -54,7 +58,7 @@ app.use(FUpload);
| beforeRemove | 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除 | (file: FileItem, fileList: FileItem[]) => boolean \| Promise\<boolean\> | - |
| disabled | 是否禁用 | boolean | `false` |
| data | 上传接口附带的数据 | object | `{}` |
| fileList | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]。 | FileItem[] | `[]` |
| fileList(v-model) | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]。 | FileItem[] | `[]` |
| headers | 上传接口中请求附带的请求头 | object | `{}` |
| listType(第一期只支持`text`) | 文件列表的类型,可选值有`text` / `picture-card` | string | `text` |
| multiple | 是否支持多选文件 | boolean | `false` |

Choose a reason for hiding this comment

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

该代码补丁似乎涉及一些文档或注释,而不是实际的代码更改。

从代码中看不出任何 bug 风险,但是可以提出一些建议:

  • 对变量 fileList 进行数据验证,以确保其具有正确的格式和类型,并在可能的情况下进行默认化。
  • 将文档内容移动到适当的位置,并使用有效的标记语言(例如 Markdown)进行格式化,以便易于阅读和维护。
  • 在对表格中的某些字段进行更改时,请确保更新文档内容并将其与代码同步。

margin-top: 7px;
color: #93949b;
}
</style>

Choose a reason for hiding this comment

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

这段代码使用 Vue 框架实现了一个上传文件的功能,具体描述如下:

模板部分使用 FUpload 组件实现上传文件,并设置了相关属性和方法。其中 #tip 是一个插槽(slot),用于自定义提示信息。

脚本部分使用 ref 函数创建了一个 fileList 变量,使用它来存储已经上传的文件,同时定义了一些处理上传过程中不同事件的监听函数 change, remove, success, error, exceed, 和 progressbeforeUpload 函数则是一个处理上传前验证的钩子函数,限制了上传文件的大小。

对于改进的建议,如果是进行长期的项目开发或者在多人协作开发中需要考虑代码可维护性,可以做一些如下的优化:

  • 更加合理地组织代码结构,将相关联的代码放在一起。
  • 添加注释,增加代码的可读性和可维护性。
  • 进一步封装 fileList,让其成为一个响应式数据,方便修改,并且通过计算属性(computed)等方式派生出一些相关数据,例如 uploadedFilesunuploadedFiles 等等。
  • 将各个监听函数(change, remove, success, error, exceed, 和 progress)也封装起来,分离业务逻辑和视图展示。
  • 多考虑代码的健壮性,在合适的地方增加错误处理、异常处理、数据校验等机制。

@wanchun wanchun changed the title Fix upload file list empty feat: upload组件 fileList 支持 v-model 双向绑定 Jun 26, 2023
@wanchun wanchun changed the title feat: upload组件 fileList 支持 v-model 双向绑定 feat: FUpload组件 fileList 支持 v-model 双向绑定 Jun 26, 2023
@wanchun wanchun merged commit 490f515 into main Jun 26, 2023
@wanchun wanchun deleted the fix-upload-fileList-empty branch June 26, 2023 11:40
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.

2 participants