【文件管理】关于上传下载文件的设计

这里主要谈论的是产品设计里面的文件管理,比如文件的上传交互及背后影响到的前后端设计。

上传文件

场景:一条记录,比如个人信息,有姓名,出生年月,性别等一般的字段,还可以允许用户上传附件作为补充,比如上传个人的学历证明等。

版本一

【平台】-【基金管理】-【产品信息】旧页面(现已废弃)

后端

用户上传文件,会将文件存在一个路径下。

前端

这里的交互设计其实和后端的做法没有什么关联。就是设计的不合理。

交互设计

新建弹窗分多步完成。

  1. 点击新增,第一步只允许编辑一般字段,点击下一步之后,先调用一次 Create 接口,后端返回该新增记录的ID;
  2. 第二步,允许用户上传附件,并且不用用户点击确定按钮就已经调用了上传接口。删除附件也是立即调用删除附件的接口。
  3. 点击确定,更新附件的信息到该记录的附件字段。

导致的问题:所有的用户下的附件不能重名。

优点: -

缺点:用户交互麻烦,如果在上传附件的时候,想要放弃该条数据,就要关闭弹窗再去删除这条数据。(或者在第二步的弹窗中有取消按钮,点击取消就去删除第一步跳转过来时候 create 接口新增的数据)

版本二

【平台】-【基金管理】-【产品信息(新)】

后端

在版本一的基础上,会在文件名前生成一个uuid,存到路径中。

并根据文件内容生成一个md5信息,在调用上传文件的接口后,会将文件的这些信息返回。

前端

交互设计

新建弹窗中,附件也和其他字段一样管理。在点击"确定"之后,attachments字段数组存放的是上传文件接口返回的文件信息,将这个字段和其他字段一起在调用 create 接口的时候作为 payload 传下去。

缺点:文件会越来越多,一直是增量的,即使在记录中删除了附件,也没有在数据(文件路径下)中真正的删除。

采用理由:在产品信息新页面中,是需要记录修改历史记录的,没有物理删除。所以该方案合理。

版本三

【平台】-【OA】-【表单设计】-【上传组件】

相关推荐
小二·2 分钟前
Prompt Engineering 高级技巧:CoT/ToT/ReAct 等进阶方法论实战
前端·react.js·prompt
chancygcx_3 分钟前
前端框架React day1--React入门
前端·react.js·前端框架
quan_泉17 分钟前
DIDCTF 取证初学者
java·服务器·前端
无风听海29 分钟前
Promise 与 Async Await 深度解析
前端·javascript
牛奶31 分钟前
AI 永远说好,于是我们只会说 yes
前端·aigc·ai编程
浩风祭月31 分钟前
把前端项目的 CI 构建时间从 15 分钟压到了 2 分钟
前端·ai编程
牛奶36 分钟前
黑客是怎么看到你数据的?
前端·安全·黑客
ihuyigui38 分钟前
国际企业办公短信接口
前端·后端·架构
lpd_lt1 小时前
服务端类vue等页面AI测试方向
前端·vue.js·人工智能
AugustRed1 小时前
A2UI 完整学习指南(含 Java 后端 + 前端实战示例)
java·开发语言·前端