上传大文件

电子商务 B2C 案例ID：203969

xinxin

4 年经验· 蓝气球（北京）医学研究有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

RDMP本质上是一个项目管理工具，旨在管理项目、项目下的里程碑&任务、对各个任务进行配置；并以任务驱动的方式，使得所有任务得以流转起来。
业务：工作台（首页）某一模块为我的任务。展示形式是列表。点击任务名称弹框在进行中状态下可上传文件。产品设计需求为一个上传进度窗口，悬浮于所有页面、弹窗之上，支持展开/收起，显示当下所有正在上传的文件，允许追加；类似一个统一查看下载进度的弹框。可以支持用户关闭任务弹框后仍执行上传进度操作。任务弹窗内的A文件上传进度需与右下角上传进度窗口的该文件A进度同步变化。状态包括：正在上传中（上传过程中需展示上传进度百分比），上传失败，上传成功。上传进度窗口导航栏三种状态：正在上传中，弹窗导航栏显示：“正在上传+导入成功数量/总数量”；上传结束，但存在部分上传失败，弹窗导航栏显示：“部分上传失败+（成功数量+失败数量）”；全部上传成功，弹窗导航栏显示：“全部上传成功+（总数量）“；上传进度窗口内容区展示为上传文件进度列表，上传中的文件支持取消上传。上传失败的支持断点续传。可点击列表内的每一条文件跳转到对应的任务详情
每个任务的所有文件上传结束后，均需右上角Toast提示：文件全部上传成功：【任务名称】文件上传已完成（成功数量)点击查看详情；文件部分上传失败：【任务名称】部分文件上传失败(失败数量)点击查看详情；点击【点击查看详情】，直接弹窗至对应任务详情,当前所在路径保持不变；
实现技术方式：通过pinia状态管理工具管理所有文件数据。数据池中的数据结构为一个记录所有文件对象的数组。该文件对象为该文件所属的任务id，任务名称name，上传进度progress，上传状态status，是否删除isDelete，文件主键fileId,上传错误提示errMsg。使用oss上传api获取进度，断点续传方式。在任务弹窗内点击上传时把数据追加到pinia的数据池中。任务弹框内、右下角上传进度窗口回显数据池中的文件数据。实际上传操作在右下角上传进度窗口中执行。同时根据oss获取进度修改对应文件的进度和状态。实现任务弹框与右下角上传弹窗进度同步。右下角上传弹窗通过this.$el.parentNode.insertBefore(this.component.$el, this.$el.nextSibling)添加。所有对文件的操作都对数据池中的数据进行操作。