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

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

上传文件

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

版本一

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

后端

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

前端

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

交互设计

新建弹窗分多步完成。

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

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

优点: -

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

版本二

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

后端

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

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

前端

交互设计

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

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

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

版本三

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

相关推荐
Lupino23 分钟前
被 React “玩弄”的 24 小时:为了修一个不存在的 Bug,我给大模型送了顿火锅钱
前端·react.js
米丘29 分钟前
了解 Javascript 模块化,更好地掌握 Vite 、Webpack、Rollup 等打包工具
前端
Heo31 分钟前
深入 React19 Diff 算法
前端·javascript·面试
滕青山32 分钟前
个人所得税计算器 在线工具核心JS实现
前端·javascript·vue.js
小怪点点33 分钟前
手写promise
前端·promise
国思RDIF框架42 分钟前
RDIFramework.NET Web 敏捷开发框架 V6.3 发布 (.NET8+、Framework 双引擎)
前端
Mintopia43 分钟前
如何在有限的时间里,活出几倍的人生
前端
炫饭第一名43 分钟前
速通Canvas指北🦮——变形、渐变与阴影篇
前端·javascript·程序员
Neptune144 分钟前
让我带你迅速吃透React组件通信:从入门到精通(上篇)
前端·javascript
阿懂在掘金1 小时前
Vue 表单避坑(一):为什么 v-model 绑定对象属性会偷偷修改父组件数据?
前端·vue.js