labring / labring/FastGPT

【严重】知识库/门户上传文件后,拖动页面或改变窗口宽度会导致已上传文件列表消失

Open
#7,053 1 comment 0 reactions 0 assignees View on GitHub
bug
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.