【严重】知识库/门户上传文件后,拖动页面或改变窗口宽度会导致已上传文件列表消失
- Dominant language
- TypeScript
- Stars
- 29.6k
- Forks
- 7.3k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 152
Description
## 【严重】知识库/门户上传文件后,拖动页面或改变窗口宽度会导致已上传文件列表消失
**例行检查**
[//]: # "方框内填 x 表示打钩"
* [x] 我已确认目前没有类似 issue
* [x] 我已完整查看过项目 README,以及[[项目文档](https://doc.fastgpt.io/introduction/)](https://doc.fastgpt.io/introduction/)
* [x] 我使用了自己的 key,并确认我的 key 是可正常使用的
* [x] 我理解并愿意跟进此 issue,协助测试和提供反馈
* [x] 我理解并认可上述内容,并理解项目维护者精力有限,**不遵循规则的 issue 可能会被无视或直接关闭**
**你的版本**
* [x] 公有云版本
* [x] 私有部署版本, 具体版本号: V4.14.9
**问题描述, 日志截图,配置文件等**
在 FastGPT 知识库上传文件时,文件上传完成后,如果拖动页面、调整浏览器窗口宽度,或触发 PC / 移动端响应式布局切换,页面上已经上传成功的文件会直接消失。
这个问题在 **公有云版本和私有化版本中都存在**,并且不是偶发体验问题,已经存在较长时间。
典型场景:
```text
知识库上传文件 -> 文件显示已上传 -> 拖动页面 / 调整窗口宽度 -> 已上传文件消失
```
门户场景也可以复现:
```text
企业门户中上传文件 -> 文件显示已上传 -> 拖动页面 / 调整窗口宽度 -> 已上传文件消失
```
这个问题影响比较严重,尤其是企业用户场景:
1. 企业用户很多是非开发人员,不会理解这是前端状态丢失;
2. 文件上传后突然消失,会让用户误以为上传失败、文件丢失或系统不稳定;
3. 大文件上传耗时较长,用户可能会重复上传,增加使用成本;
4. 在知识库建设、企业门户交付、客户培训场景中,这会明显影响产品可信度;
5. 如果用户已经上传多个文件,只要误拖动窗口或触发响应式切换,就可能丢失当前页面上的上传列表,体验非常差。
从接口现象看,上传流程已经请求过类似接口:
```text
/api/core/dataset/presignDatasetFilePostUrl
```
后续也有训练队列轮询:
```text
/api/core/dataset/training/getDatasetTrainingQueue?datasetId=xxx
```
所以这个问题看起来不像是后端上传接口失败,更像是前端上传页状态在页面响应式切换时被重置。
**复现步骤**
方式一:知识库页面复现
1. 进入知识库;
2. 点击上传文件;
3. 选择一个 PDF / Word / 文档文件;
4. 等待文件上传完成,页面上出现已上传文件;
5. 拖动浏览器窗口边缘,改变页面宽度;
6. 或者打开浏览器开发者工具,在 PC / mobile 宽度之间切换;
7. 观察上传文件列表。
方式二:企业门户复现
1. 在企业门户中进入知识库上传入口;
2. 上传文件;
3. 文件上传完成后,页面上出现已上传文件;
4. 拖动页面或调整浏览器窗口大小;
5. 已上传文件从页面上消失。
**预期结果**
上传成功后的文件列表不应该因为拖动页面、改变浏览器窗口宽度、缩放页面,或触发 PC / mobile 响应式布局切换而消失。
即使页面布局发生变化,已上传文件也应该继续保留,用户可以继续下一步导入 / 训练操作。
**实际结果**
上传成功后的文件会在拖动页面、改变窗口宽度、触发响应式布局切换后,从页面上直接消失。
用户无法判断文件是否真的上传成功,会误以为上传失败或数据丢失。
**可能原因分析**
我不确定判断是否完全准确,供参考。
我看了一下前端实现,怀疑问题可能和知识库详情页 PC / mobile 两套布局切换有关。
如果上传组件 `` 挂在类似下面这种响应式分支里:
```tsx
{isPc ? (
// PC layout
) : (
// mobile layout
)}
```
那么当窗口宽度变化导致 `isPc` 切换时,React 会卸载当前分支里的 ``,再挂载另一个分支里的 ``。
如果上传文件列表状态是在 `` 内部或其 Context Provider 内通过 `useState` 临时维护,例如:
```tsx
const [sources, setSources] = useState([]);
```
组件重新挂载后,`sources` 会重新初始化为空数组,页面上已上传的文件列表就会消失。
**建议修复方向**
建议不要让知识库上传流程组件因为 PC / mobile 响应式切换而被卸载。
可以考虑:
1. 上传流程组件使用稳定的组件树;
2. PC / mobile 只调整样式,不切换整个上传组件实例;
3. 将上传文件列表状态提升到不会被响应式切换卸载的父级;
4. 或者在上传成功后,将已上传文件信息做临时持久化,避免 remount 后丢失。
比较理想的是:导入页本身保持稳定,不参与 PC / mobile 两套分支切换,例如:
```tsx
if (currentTab === TabEnum.import) {
return ;
}
```
这样拖动页面或切换响应式布局时,上传组件不会被卸载,已上传文件列表也不会丢失。
**相关截图**
我可以补充录屏,录屏内容包括:
1. 上传文件成功;
2. 页面出现已上传文件;
3. 拖动页面或调整窗口宽度;
4. 文件列表消失。
注:上传接口中包含 presigned URL、签名参数、datasetId、文件名等敏感信息,相关请求地址会做脱敏处理后再补充。
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.